ラジオボタンの動的リストを持つvue.js vモデル
私は再利用可能なvue radio-button-button-buttonコンポーネント、およびラベルと値を含むオブジェクトと）を作成しようとしています。
私は問題の半分ごとに成功しましたが、それらを組み合わせることができませんでした。
- ボタンがテンプレート内で静的に定義されているデータモデルにバインドされている一連のラジオボタンを作成できますが、リストを動的にする方法がわかりません。これはそのためのコードです：
//component
const Radio = {
template: '#test',
prop: ['value'],
data () {
return {
selected: this.value
}
},
model: {
prop: 'value',
event: 'change'
},
methods: {
handleClickInput (e) {
this.$emit('change', this.selected)
}
}
}
//app
var app2 = new Vue({
el: '#app2',
data: {
door: '',
doorOptions: {
'Yes': 1,
'No': 0,
}
},
components: { Radio, }
}) _<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app2">
<radio v-model="door"></radio>
<p>
door = {{door}}
</p>
</div>
<template id="test">
<div>
<input type="radio" value="0" v-model="selected" @change="handleClickInput">0
<input type="radio" value="1" v-model="selected" @change="handleClickInput">1
</div>
</template> _- 「オプション」オブジェクトに基づいてラジオボタンの動的リストを作成できますが、それらをデータモデルにバインドする方法が見つかりません。これはそのためのコードです：
// component
Vue.component('radio-set', {
template: '#radio-set',
props: {
'label-name': '',
'variable': '',
'options': '',
},
methods: {
clicked: function(variable, key, value) {
// none of this is right, it doesn't update the vue data model
window[variable] = value; //assign the new value to the dynamic variable name
selected = value;
this.$emit("click-event", variable) //create the click event for model updating by the parent
}
},
})
//app
var app = new Vue({
el: '#vueApp',
data: {
door:'initial value',
doorOptions: {
'Yes':1,
'No':0,
'Maybe':5,
'A new option':25
},
},
methods: {
buttonClick: function(p1){
console.log(p1+': '+window[p1]); //the variable was assigned inside the child component
}
}
}); _<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="vueApp">
<radio-set
label-name="Radio button set"
variable="door"
:options="doorOptions"
@click-event="buttonClick"
>door: {{door}}
</radio-set>
</div>
<template id="radio-set">
<div>
<label>{{labelName}}:</label>
<button
type="button"
v-for="(val, key) in options"
@click="clicked(variable, key, val)"
>
{{ key }}
</button>
</div>
</template> _誰もが私が前進することができる方法についてのカップルのポインターを手伝ってくれることができますか？
@PierResaidが言及されているように、カスタムコンポーネントのv-modelの使用方法についてもっと読むことができます。
これはinput[type="radio"]を使用し、変更イベントを親コンポーネントに戻すための他の例です。
// component
Vue.component('radio-set', {
template: '#radio-set',
props: {
'label-name': '',
'value': '',
'options': '',
}
})
//app
var app = new Vue({
el: '#vueApp',
data() {
return {
door: null,
doorOptions: {
'Yes': 1,
'No': 0,
'Maybe': 5,
'A new option': 25
}
};
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="vueApp">
<radio-set label-name="Radio button set" v-model="door" :options="doorOptions"></radio-set>
door: {{door}}
</div>
<template id="radio-set">
<div>
<div>{{labelName}}:</div>
<label v-for="(val, key) in options" :key="val">
<input type="radio"
:name="labelName"
:value="val"
:checked="val == value"
@change="$emit('input', val)">
{{ key }}
</label>
</div>
</template>まず第一に：あなたのオプションのために配列を持つことがより簡単になるでしょう。
doorOptions: [
{ key: "Yes", value: 1 },
{ key: "No", value: 0 },
{ key: "Maybe", value: 5 },
{ key: "A new option", value: 25 }
]
};
_そのようにあなたはそれを繰り返すことができます。
また、選択した値をカスタムコンポーネントとアプリとの間で同期するための良い方法は, V-Model を使用することです。
そのようにして、そのような再利用可能なコンポーネントを作成できます。
<template>
<div>
<label>{{labelName}}:</label>
<button
type="button"
v-for="(val, idx) in options"
:key="idx"
@click="clicked(val)"
>{{ val.key }}</button>
</div>
</template>
<script>
export default {
props: ["value", "options", "labelName"],
methods: {
clicked(val) {
this.$emit("input", val);
}
}
};
</script>
_そしてこのようなものを使う
<template>
<div id="app">
<radio-set v-model="selected" label-name="Radio button set" :options="doorOptions"/>
Selected : {{selected.key}}
</div>
</template>
<script>
import RadioSet from "./components/RadioSet";
export default {
name: "App",
components: {
RadioSet
},
data() {
return {
selected: null,
doorOptions: [
{ key: "Yes", value: 1 },
{ key: "No", value: 0 },
{ key: "Maybe", value: 5 },
{ key: "A new option", value: 25 }
]
};
}
};
</script>
_私がこれらの答えを勉強して玩具している間、私は以下の方法を思い付きました：
- オブジェクトの配列を使用する優先方法および vuetify ：
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
color: {
label: "Choose:",
// Array List
items: [
{ key: 1, value: "Red", color: "red" },
{ key: 2, value: "Green", color: "green" },
{ key: 3, value: "Blue", color: "blue" }
],
selectedItemKey: 2 // Red
}
}),
computed: {
selectedColorItem() {
return this.color.items.find(item => item.key===this.color.selectedItemKey)
}
}
}) _<div id="app">
<v-app id="inspire">
<v-container fluid mx-4>
<v-radio-group
:label="color.label"
row
v-model="color.selectedItemKey"
>
<v-radio
:color="item.color"
:key="item.key"
:label="item.value"
:value="item.key"
v-for="(item, index) in color.items"
></v-radio>
</v-radio-group>
Color: <span :class=`${selectedColorItem?.color}--text`>
{{selectedColorItem?.value}}
</span>(key: {{color.selectedItemKey}})
</v-container>
</v-app>
</div>
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script> _