将数据动态绑定到vue模型组件

  • Z时代
  • 2024-01-10
  • 分类：问答

我试图制作一个简单的表单，它将接受不同类型货币的用户输入。将数据动态绑定到vue模型组件

这里有一个（碎）小提琴有希望跨越了我想做的事情得到： https://jsfiddle.net/4erk8yLj/7/

我想我的组件将数据绑定到我的根VUE实例，但我不知道如果我的v模型字符串是允许的。检查出来：

Vue.component('conversion-row', { 
    props: ['currency', 'values'], 
    template: '<div>{{currency}}:</div><div><input v-model="values[currency]></div><', 
}); 
var vm = new Vue({ 
    el: "#app", 
    data: { 
    currencies: ['USD', 'BTC'], 
    values: { 
     'BTC': '', 
     'USD': '' 
    } 
    } 
});

模板：

<div id="app"> 
    <li> 
    <conversion-row is li v-for="currency in currencies" v-bind:currency="currency"> 
    </conversion-row> 
    </li> 
</div>

什么是解决这个问题的好办法？

回答：

的东西，你可能需要更正夫妇：

首先，data属性必须是一个函数，而不是一个对象。这使得每一个实例获得的数据重新计算每一个正在创建它时，请参阅：

var vm = new Vue({ 
    el: "#app", 
    data() { 
    return { 
     currencies: ['USD', 'BTC'], 
     values: { 
     'BTC': 'BTC Value', 
     'USD': 'USD Value', 
     }, 
    }; 
    } 
});

其次，<conversion-row>没有values财产界。这里是你可以做什么：

<div id="app"> 
    <li v-for="currency in currencies"> 
    <conversion-row :currency="currency" :values="values"></conversion-row> 
    </li> 
</div>

末，该组件应始终瞄准一个根元素（包装），然后你可以窝尽可能多的孩子里面，只要你想。更重要的是，而不是使用v-model，可以绑定value这是一个值传递给输入（单向数据绑定）的正确方法，检查以下内容：

Vue.component('conversion-row', { 
    props: ['currency', 'values'], 
    template: '<div>{{currency}}:<input type="text" :value="values[currency]"></div>' 
});

还有更多的改进，你可能会使得在这里就像重新思考，如果你需要通过values以及currency到conversion-row，但我很确定你会在稍后找到答案。

所有上述将使你的代码运行和正确执行，这里的工作示例（你们的货叉）：

  • https://jsfiddle.net/maciejsmolinski/mp8m0ben/1/

这是否帮助？不知道你在使用v-model方面的目标是什么，但这里的工作v-model的例子（根据你的例子）

：

Vue.component('conversion-row', { 
    props: ['currency', 'values'], 
    template: '<div>{{currency}}:<input type="text" v-model="values[currency]"></div>' 
});

而且相应的模板：

<div id="app"> 
    <p><span>USD Value:</span> {{ values.USD }}</p> 
    <p><span>BTC Value:</span> {{ values.BTC }}</p> 
    <br> 
    <li v-for="currency in currencies"> 
    <conversion-row :currency="currency" :values="values"></conversion-row> 
    </li> 
</div>

您可以通过以下URL找到它：

  • https://jsfiddle.net/maciejsmolinski/0xng8v86/2/

以上是 将数据动态绑定到vue模型组件 的全部内容， 来源链接： utcz.com/qa/265800.html

回到顶部