瞭解組件和道具

我在解決如何使用組件和道具時遇到了問題。瞭解組件和道具

更具體地說，我試圖更新組件中的數據並讓它更改組件。我有一個組件模板迭代的對象數組。我想改變這個數組，並在組件中反映這個變化。

這裏是我的玩具例子：

<html> 
<head> 
    <script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script> 
    <script src="assets/jquery-1.12.0.js"></script> 
</head> 

<body> 
    <div id="app"> 
     <input id="opp-list-input" v-model="opportunityListVals" type="hidden"> 
     <br> 
     <opportunitylist v-bind:opp-list="opportunityListVals"></opportunitylist> 
    </div> 
    <script> 
     new Vue({ 
      el: '#app', 
      data: { 
       opportunityListVals: [{name: 'First Opportunity'},{name: 'Second Opportunity'}] 
      }, 
      components: { 
       opportunitylist: { 
        props: ['oppList'], 
        template: '<ul>' 
+ '<li v-for="opp in oppList">' 
+ '{{opp.name}}' 
+ '</li>' 
+ '</ul>' 
       } 
      } 
     }); 
     $('#opp-list-input').val([{name: 'Third Opportunity'}]); 
     $("#opp-list-input").change(); 
    </script> 
</body> 
</html>

我試圖最終只顯示了單一的「三機」，即使它與兩個不同的值初始化線。

當我運行它時，它會給我重複的值警告並顯示一些空的子彈。我認爲這意味着它不按我期望的方式處理數組。

我在道具和零部件方面走上了正軌嗎？

有沒有更好的方法來處理這個對象數組。通過輸入元素髮送它似乎很奇怪，但我看到的每個示例都是這樣做的。

來源

2016-01-15 David Ranney

這裏是你的組件的代碼。您只需使用:oppList="opportunityListVals"即可將該數組從父項傳遞給子項，而不是使用v-bind。當父數組更新時，子組件也會自動更新。

您還需要使用Vue.extend()來創建子組件，而不僅僅是發送對象。

<body> 
<div id="app"> 
    <opportunitylist :oppList="opportunityListVals"></opportunitylist> 
</div> 
<script> 
    new Vue({ 
     el: '#app', 
     data: { 
      opportunityListVals: [{name: 'First Opportunity'},{name: 'Second Opportunity'}] 
     }, 
     components: { 
      opportunitylist: Vue.extend({ 
       props: ['oppList'], 
       template: '<ul>' 
        + '<li v-for="opp in oppList">' 
        + '{{opp.name}}' 
        + '</li>' 
        + '</ul>' 
      }) 
     } 
    }); 
</script>

我真的不明白你與輸入和第三值在做什麼，所以你必須要澄清之前，我可以在那裏提供輸入。

來源

2016-01-15 01:28:59 Jeff

瞭解組件和道具

回答

相關問題