Vue.js에게 소품을 넘겨주는 거?

Vue.js에게 소품을 넘겨주는 거?

부모 컴포넌트에서 자녀 컴포넌트로 소품을 전달하고 싶습니다.저의 소품은tid.

부모 컴포넌트는 다음과 같습니다.

<div id="tracksec" class="panel-collapse collapse">
    <library :tid="track.category_id"></library>
</div>

하위 구성 요소는 다음과 같습니다.

<script>
import Chapter from "./chapter";
import Http from "../../services/http/httpService";
export default {
    components: {Chapter},
    props:['tid'],
    name: "library",
    data(){
        return{
            library:{},
        }
    },
    computed:{
      getPr(){
          return this.$props;
      }
    },
        mounted(){
      console.log(this.$props);
        Http.get('/api/interactive/lib/' + this.tid)
            .then(response => this.library = response.data)
            .catch(error => console.log(error.response.data))
    }
}

다음은 http 소스입니다.

import axios from 'axios';


class httpService {

static get(url, params) {
    if (!params) {
        return axios.get(url);
    }
    return axios.get(url, {
        params: params
    });
}

static post(url, params) {
    return axios.post(url, params);
}
}

export default httpService;

합격하고 싶다tid에 대한 가치http.get기능.예를 들어 다음과 같습니다.

Http.get('/api/interactive/lib/' + this.tid)

하지만, 그tid값은undefined. 어떻게 해야 하나요?tid설치 후크 또는 생성 후크?

Vue는 처음이지만 변화에 따라 트리거되는 "감시자"를 추가하는 것이 좋을 것 같습니다.작성 시 "track-object"가 비어 있습니다.이 선두 track.category_id는 정의되어 있지 않습니다.그런 다음 HTTP get에서 응답을 받으면 값이 설정되지만 라이브러리 구성 요소에서는 업데이트되지 않습니다.

다음과 같은 경우:

<script>
import Chapter from "./chapter";
import Http from "../../services/http/httpService";
export default {
    components: {Chapter},
    props:['tid'],
    name: "library",
    data(){
        return{
            library:{},
        }
    },
    watch: {
        // if tid is updated, this will trigger... I Think :-D
        tid: function (value) {
          console.log(value);
            Http.get('/api/interactive/lib/' + value)
            .then(response => this.library = response.data)
            .catch(error => console.log(error.response.data))
        }
      },
    computed:{
      getPr(){
          return this.$props;
      }
    },
        mounted(){
      console.log(this.$props);

      // Will be undefined
      /*
        Http.get('/api/interactive/lib/' + this.tid)
            .then(response => this.library = response.data)
            .catch(error => console.log(error.response.data))*/
    }
}
</script>

감시자에 관한 문서

(Cant test 코드를 테스트합니다만, 이해하실 수 있습니다.)

상위 구성 요소에서 이 코드 스니펫을 시도합니다.

<div id="tracksec" class="panel-collapse collapse">
  <library tid="track.category_id"></library>
</div>

그러면 하위 구성 요소 코드는 다음과 같습니다.

<script>
  import Chapter from "./chapter";
  import Http from "../../services/http/httpService";
  export default {
    components: {
      Chapter
    },
    props: [ 'tid' ],
    name: 'library',
    data () {
      return {
         library: {},
      }
    },
    computed: {
      getPr () {
          return this.tid;
      }
    },
    mounted () {
      const tidValue = this.tid // get the value of props you've passed
      console.log(tidValue) // check if it is getting the right value.
      // code for http request.
    }
}
</script>

부모 스크립트 섹션은 다음과 같습니다.

   import Library from "./library";
import Http from '../../services/http/httpService';

export default {
    components: {Library},
    name: "interactive",
    data() {
        return {
            track: {},
        }
    },

    mounted() {
        Http.get('/api/interactive/track/' + this.$route.params.id)
            .then(response => this.track = response.data)
            .catch(error => console.log(error.response.data))
    }
}

언급URL : https://stackoverflow.com/questions/47870225/passing-props-in-axios-to-vue-js