Question

我有一个循环的对象数组，我看了一个与每个对象相关的输入，但问题是v-model =“something”：这个东西改变了所以我不知道该看什么

<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：

中的相关行

选项：深

要检测对象内的嵌套值更改，您需要在options参数中传入deep：true。

在您的情况下，您可以按如下方式修改上面的示例代码：

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
    }
}

希望它有所帮助！

有没有办法在v-for循环中观察输入（v模型）

1 个答案: