有沒有一種方法可以在v-for循環中觀察輸入（v型）

Question

我有一個循環的對象數組，並且我看着與每個對象相關的輸入，但問題在於v-模型=「東西」：這個東西發生了變化，所以我不知道該看什麼

<table class="table displaynone" id="table-sauces" > 
    <tr v-for="o in order">       
     <td>@{{o.produit}} @{{o.num}}</td> 
      <td v-for="sauce in les_sauce">     
       <input type="radio" :name="o.produit+o.num" @click="$emit(setsauce(o.is_menu))" :value="sauce.id" v-model="o.sauce"> 
        @{{sauce.name}} 
       <img :src="sauce.link"> 
     </td> 
    </tr> 
</table> 

我怎樣才能看到輸入值？

Answer 1

你有兩個級別的循環，他們似乎循環不同的東西（order和les_sauce）。

儘管如此，這裏是使用你的代碼（v-for="sauce in les_sauce"）的內部循環，並演示瞭如何監視更改一個簡單的例子：

你可以爲每個數組項和表創建單獨的子組件在子組件內部進行更改。

例如，這是在父組件模板中的循環部分：

<td v-for="sauce in les_sauce"> 
    <sauce-view :sauce="sauce" :ord="o"></sauce-view> 
</td> 

和您的孩子組成：

Vue.component('sauce-view', { 
    props: ["sauce", "ord"], 
    template: ` 
     <div class="sauce-view"> 
      <input type="radio" :name="ord.produit+ord.num" 
      @click="$emit(setsauce(ord.is_menu))" 
      :value="sauce.id" v-model="ord.sauce"> @{{sauce.name}} 
      <img :src="sauce.link"> 
     </div>`, 
    watch: { 
     sauce: function() { 
      // this will get triggered within sauce-view component, when one of your "sauce" changes 
     }, 
     ord: function() { 
      // this will get triggered within sauce-view component, when one of your "o" changes 
     } 
    } 
}) 

如示例代碼中所示的子組件代碼上面，在這裏你可以收看父母個別排列的項目 - o和sauce

注意：o在父母作爲ord傳遞給子組件。這是一個示例，顯示變量不需要在父組件和子組件中相同。

編輯：後評論＃4（深觀看）

在我的示例代碼的其他信息上面，我沒有設置這是需要看深deep:true。

下面是從API document相關線路：

選項：深

要還檢測內部的物體，嵌套值的變化，需要在深通：真正的選項參數。

在你的情況，你可以修改上面的示例代碼如下：

watch: { 
    sauce: { 
     handler: function() { 
      // this will get triggered when any of the nested values of "sauce" change 
     }, 
     deep: true // this enables watching the nested values inside this object 
    }, 
    ord: function() { 
     // this will get triggered within sauce-view component, when one of your "o" changes 
    } 
} 

希望它能幫助！