Question

我对数组中的无线电输入动态数有问题

Color:<br>
<label><input type="radio" name="params[54]" value="21">Blue</label>
<label><input type="radio" name="params[54]" value="38">Yellow</label>
Size:<br>
<label><input type="radio" name="params[12]" value="32">S</label>
<label><input type="radio" name="params[12]" value="44">M</label>
<label><input type="radio" name="params[12]" value="58">L</label>

它不能只是颜色和大小，它应该有超过两个或三个输入。我使用VueJS Component。

export default {
    data () {
        return {
            params: {}
        }
    },
    methods:{
        update: function(){
            // here I want use params
        }
    }
}

我需要观察更改输入并获取params对象，例如：

在我的旧jQuery代码中，我这样做

$("input[type=radio]").on("change", function(){
        var selected = {};
        $("input:checked").each(function(a, b){
            selected[$(b).data("param-id")] = $(b).data("value-id");
        });
});

但在此，我真的不知道如何才能在Vue做到这一点。有什么想法吗？

修改我通过传递参数列表来编织它

var params = JSON.parse(this.$attrs.params);
for(var key in params){
    this.$set(this.params, key, 0);
    this.$watch("params."+key, function(){
        this.update();
    });
}

将v-model添加到输入

<label>
    <input
    :checked="params[54] == 21"
    v-model="params[54]"
    type="radio"
    name="params[54]"
    v-bind:value="21"
    >
    Blue
</label>

现在我可以使用this.attributes获取所选参数的对象。

动态输入数量

0 个答案: