구성 요소의 메서드에서 Vue JS 소품에 액세스하려면 어떻게합니까?

Question

소품에 대한 이해가 잘못되었을 수 있지만 구성 요소에 소품을 전달하고 메소드의 값을 사용할 수없는 것 같습니다.

지금까지 고정 API에서 데이터를 가져 와서 vue 구성 요소의 모든 것을 출력 할 수있게되었습니다. 이제 api 소스가 구성 요소에 전달 된 변수에 종속되기를 바랍니다.

내 블레이드 템플릿 : 내 뷰 구성 요소에서 다음

<projectstatuses :userslug="this-user" :projectslug="this-project"></projectstatuses> 

: 나는 기본값을 제거하면 내가 기본값을 얻을 콘솔에서

export default { 
    props: { 
     userslug: { 
      type: String, 
      default: "other-user", 
     }, 
     projectslug: { 
      type: String, 
      default: "other-project", 
     } 
    }, 
    data() { 
     return { 
      statuses : [], 
     } 
    }, 
    created(){ 
     this.getStatuses(); 
    }, 
    methods : { 
     getStatuses(){ 
     console.log(this.userslug); 
     console.log(this.projectslug); 
      axios.get('/api/' + this.userslug + '/' + this.projectslug) 
       .then((response) => { 
        let statuses = response.data; 
        this.statuses = statuses.statuses; 
        console.log(response.data.statuses); 
       }) 
       .catch(
        (response) => { 
         console.log('error'); 
         console.log(response.data); 
        } 
       ); 
     } 
    } 
} 

, 나는 정의되지 않은 얻을. api 메서드를 제거하고 단순히 값을 기록하는 콘솔을 시도했지만 아직 정의되지 않았습니다. 내가 할 수있는 일이 가능한지 아니면 소품이 어떻게 작동하는지 완전히 오해 한 것입니까?

Answer 1

당신은 bindthis-user 및 this-project 등록 정보로하지 값

그래서

상위에 data 객체를 정의해야합니다,

하지만 this-user을 전달하려는 경우에 노력하고있다 this-project 값을 제거하는 것처럼 : 그 시도 :

<projectstatuses userslug="this-user" projectslug="this-project"></projectstatuses>

Dynamic-Props

Answer 2

는 템플릿에 :를 추가하지 마십시오 :

<projectstatuses userslug="this-user" projectslug="this-project"></projectstatuses> 

뷰가 this-user에 바인딩 된 데이터가있을 것으로 예상됩니다.