Vue.js에서 하위 구성 요소의 소품을 업데이트하는 방법은 무엇입니까?

일부 데이터에 대해 API 호출을 수행 할 상위 구성 요소가 있습니다. 응답이 돌아 오면 데이터를 업데이트합니다. 데이터를 하위 구성 요소로 보냈습니다. 이 하위 구성 요소는 초기 값만 렌더링하지만 빈 배열이지만 업데이트 된 데이터는 렌더링하지 않습니다. React에서 속성을 업데이트하면 하위 구성 요소가 다시 렌더링된다는 것을 알고 있습니다. Vue.js에서 어떻게 이것을 할 수 있습니까?Vue.js에서 하위 구성 요소의 소품을 업데이트하는 방법은 무엇입니까?

<template> 
    <div id="app"> 
    <Table v-bind:users='users' /> 
    </div> 
</template> 

<script> 
import Table from './components/Table' 

export default { 
    name: 'app', 
    components: { 
    Table 
    }, 
    data() { 
    return { 
     users: [] 
    } 
    }, 
    created:() => { 
    fetch('http://jsonplaceholder.typicode.com/users').then((response) => { 
     response.json().then((data) => { 
     console.log(data) 
     this.users = data 
     }) 
    }) 
    } 

} 
</script> 

<style> 
#app { 
    font-family: 'Avenir', Helvetica, Arial, sans-serif; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
    text-align: center; 
    color: #2c3e50; 
    margin-top: 60px; 
} 
</style>

이 뷰 데이터를 수신하고 업데이트합니다 하위 구성 요소입니다 :

이

데이터를 전달합니다 부모 구성 요소입니다

<template> 
    <ul> 
    <li v-for='user in users'> 
     {{ user.name }} 
    </li> 
    </ul> 
</template> 

<script> 
export default { 
    name: 'Table', 
    data() { 
    return { 
    } 
    }, 
    props: ['users'], 

} 
</script> 

<style scoped> 

</style>

을 응답 외모를 가져 like :

[ 
    { 
      "id":1, 
      "name":"Leanne Graham", 
      "username":"Bret", 
      "email":"[email protected]", 
      "address":{ 
       "street":"Kulas Light", 
       "suite":"Apt. 556", 
       "city":"Gwenborough", 
       "zipcode":"92998-3874", 
       "geo":{ 
         "lat":"-37.3159", 
         "lng":"81.1496" 
       } 
      }, 
      "phone":"1-770-736-8031 x56442", 
      "website":"hildegard.org", 
      "company":{ 
       "name":"Romaguera-Crona", 
       "catchPhrase":"Multi-layered client-server neural-net", 
       "bs":"harness real-time e-markets" 
      } 
    }, 
    { 
      "id":2, 
      "name":"Ervin Howell", 
      "username":"Antonette", 
      "email":"[email protected]", 
      "address":{ 
       "street":"Victor Plains", 
       "suite":"Suite 879", 
       "city":"Wisokyburgh", 
       "zipcode":"90566-7771", 
       "geo":{ 
         "lat":"-43.9509", 
         "lng":"-34.4618" 
       } 
      }, 
      "phone":"010-692-6593 x09125", 
      "website":"anastasia.net", 
      "company":{ 
       "name":"Deckow-Crist", 
       "catchPhrase":"Proactive didactic contingency", 
       "bs":"synergize scalable supply-chains" 
      } 
    }, 
    { 
      "id":3, 
      "name":"Clementine Bauch", 
      "username":"Samantha", 
      "email":"[email protected]", 
      "address":{ 
       "street":"Douglas Extension", 
       "suite":"Suite 847", 
       "city":"McKenziehaven", 
       "zipcode":"59590-4157", 
       "geo":{ 
         "lat":"-68.6102", 
         "lng":"-47.0653" 
       } 
      }, 
      "phone":"1-463-123-4447", 
      "website":"ramiro.info", 
      "company":{ 
       "name":"Romaguera-Jacobson", 
       "catchPhrase":"Face to face bifurcated interface", 
       "bs":"e-enable strategic applications" 
      } 
    }, 
    { 
      "id":4, 
      "name":"Patricia Lebsack", 
      "username":"Karianne", 
      "email":"[email protected]", 
      "address":{ 
       "street":"Hoeger Mall", 
       "suite":"Apt. 692", 
       "city":"South Elvis", 
       "zipcode":"53919-4257", 
       "geo":{ 
         "lat":"29.4572", 
         "lng":"-164.2990" 
       } 
      }, 
      "phone":"493-170-9623 x156", 
      "website":"kale.biz", 
      "company":{ 
       "name":"Robel-Corkery", 
       "catchPhrase":"Multi-tiered zero tolerance productivity", 
       "bs":"transition cutting-edge web services" 
      } 
    }, 
    { 
      "id":5, 
      "name":"Chelsey Dietrich", 
      "username":"Kamren", 
      "email":"[email protected]", 
      "address":{ 
       "street":"Skiles Walks", 
       "suite":"Suite 351", 
       "city":"Roscoeview", 
       "zipcode":"33263", 
       "geo":{ 
         "lat":"-31.8129", 
         "lng":"62.5342" 
       } 
      }, 
      "phone":"(254)954-1289", 
      "website":"demarco.info", 
      "company":{ 
       "name":"Keebler LLC", 
       "catchPhrase":"User-centric fault-tolerant solution", 
       "bs":"revolutionize end-to-end systems" 
      } 
    }, 
    { 
      "id":6, 
      "name":"Mrs. Dennis Schulist", 
      "username":"Leopoldo_Corkery", 
      "email":"[email protected]", 
      "address":{ 
       "street":"Norberto Crossing", 
       "suite":"Apt. 950", 
       "city":"South Christy", 
       "zipcode":"23505-1337", 
       "geo":{ 
         "lat":"-71.4197", 
         "lng":"71.7478" 
       } 
      }, 
      "phone":"1-477-935-8478 x6430", 
      "website":"ola.org", 
      "company":{ 
       "name":"Considine-Lockman", 
       "catchPhrase":"Synchronised bottom-line interface", 
       "bs":"e-enable innovative applications" 
      } 
    }, 
    { 
      "id":7, 
      "name":"Kurtis Weissnat", 
      "username":"Elwyn.Skiles", 
      "email":"[email protected]", 
      "address":{ 
       "street":"Rex Trail", 
       "suite":"Suite 280", 
       "city":"Howemouth", 
       "zipcode":"58804-1099", 
       "geo":{ 
         "lat":"24.8918", 
         "lng":"21.8984" 
       } 
      }, 
      "phone":"210.067.6132", 
      "website":"elvis.io", 
      "company":{ 
       "name":"Johns Group", 
       "catchPhrase":"Configurable multimedia task-force", 
       "bs":"generate enterprise e-tailers" 
      } 
    }, 
    { 
      "id":8, 
      "name":"Nicholas Runolfsdottir V", 
      "username":"Maxime_Nienow", 
      "email":"[email protected]", 
      "address":{ 
       "street":"Ellsworth Summit", 
       "suite":"Suite 729", 
       "city":"Aliyaview", 
       "zipcode":"45169", 
       "geo":{ 
         "lat":"-14.3990", 
         "lng":"-120.7677" 
       } 
      }, 
      "phone":"586.493.6943 x140", 
      "website":"jacynthe.com", 
      "company":{ 
       "name":"Abernathy Group", 
       "catchPhrase":"Implemented secondary concept", 
       "bs":"e-enable extensible e-tailers" 
      } 
    }, 
    { 
      "id":9, 
      "name":"Glenna Reichert", 
      "username":"Delphine", 
      "email":"[email protected]", 
      "address":{ 
       "street":"Dayna Park", 
       "suite":"Suite 449", 
       "city":"Bartholomebury", 
       "zipcode":"76495-3109", 
       "geo":{ 
         "lat":"24.6463", 
         "lng":"-168.8889" 
       } 
      }, 
      "phone":"(775)976-6794 x41206", 
      "website":"conrad.com", 
      "company":{ 
       "name":"Yost and Sons", 
       "catchPhrase":"Switchable contextually-based project", 
       "bs":"aggregate real-time technologies" 
      } 
    }, 
    { 
      "id":10, 
      "name":"Clementina DuBuque", 
      "username":"Moriah.Stanton", 
      "email":"[email protected]", 
      "address":{ 
       "street":"Kattie Turnpike", 
       "suite":"Suite 198", 
       "city":"Lebsackbury", 
       "zipcode":"31428-2261", 
       "geo":{ 
         "lat":"-38.2386", 
         "lng":"57.2232" 
       } 
      }, 
      "phone":"024-648-3804", 
      "website":"ambrose.net", 
      "company":{ 
       "name":"Hoeger LLC", 
       "catchPhrase":"Centralized empowering task-force", 
       "bs":"target end-to-end models" 
      } 
    } 
]

출처

2017-12-28 Dave Bitter

당신도'console.log (data)'를 공유 할 수 있습니까? –

응답을 추가했습니다! –

JSON 응답을 ['JSON.parse()'] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse)로 디코딩하고 있습니까? –

재 렌더링 자동으로 아이 트리거에 전달합니다!

문제는 제가 사용했던 구문이었습니다.

내가했다 : 나는 그것이 ES6 지방 화살표 단지 바인딩 문제 같아요

created() { 
    fetch('http://jsonplaceholder.typicode.com/users').then((response) => { 
     response.json().then((data) => { 
      console.log(data) 
      this.users = data 
     }) 
    }) 
}

created:() => { 
fetch('http://jsonplaceholder.typicode.com/users').then((response) => { 
    response.json().then((data) => { 
    console.log(data) 
    this.users = data 
    }) 
})

은}

나는 그것을 변경했습니다.

출처

2017-12-28 12:28:13

이미'data'에 사용하고있는 함수의'ES6 속기 '인'created : function()'대신'created()'를 할 수도 있습니다. –

더 나아졌습니다! 고마워, 나는 내 대답을 업데이 트됩니다. –

당신이 소품을 설정할 때이 예에서 그것을 CK, 그 ractive 내가 나 자신을 알아 냈어요

Vue.component('child', { 
 
    template: '#child', 
 
    props: ['users'] 
 
}); 
 

 
new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    users: [] 
 
    }, 
 
    created: function() { 
 
    var vm = this; 
 
    setTimeout(function() { 
 
     vm.users = [{ name: 'hardik'}, { name: 'someone'}]; 
 
    }, 2000) 
 
    }, 
 
    methods: { 
 
     
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script> 
 

 
<div id="app"> 
 
    <child :users="users"></child> 
 
</div> 
 

 
<template id="child"> 
 
    <ul> 
 
    <li v-for='user in users'> 
 
     {{ user.name }} 
 
    </li> 
 
    </ul> 
 
</template>

출처

2017-12-28 12:27:32

Vue.js에서 하위 구성 요소의 소품을 업데이트하는 방법은 무엇입니까?

답변

관련 문제