如何動態使用v模型和v選擇

Question

我有一組選擇，但希望它們全部與v模型一起工作，而不為它們全部創建單獨的數據屬性。

在示例中，選擇1和選擇2是一個組，選擇3和選擇4是另一個組。 當一個選擇項選擇1時，預期的行為應該是它不會影響選擇項2等。

我的猜測可能是為此計算的屬性？ 但無法正確實施

JS提琴： https : //jsfiddle.net/uxn501h2/8/

程式碼片段：

 new Vue({ el: '#app', template: ` <div> Select 1: <select v-model="selectedPerson"> <option v-for="person in people" :value="person.key">{{person.name}}</option> </select> Select 2: <select v-model="selectedPerson"> <option v-for="person in people" :value="person.key">{{person.name}}</option> </select> <h4>Selected 1 person key : {{selectedPerson}}</h4> <h4>Selected 2 person key: {{selectedPerson}}</h4> <br/> Select 3: <select v-model="selectedPersonTwo"> <option v-for="person in people" :value="person.key">{{person.name}}</option> </select> Select 4: <select v-model="selectedPersonTwo"> <option v-for="person in people" :value="person.key">{{person.name}}</option> </select> <h4>Selected 3 person Two key: {{selectedPersonTwo}}</h4> <h4>Selected 4 person Two key: {{selectedPersonTwo}}</h4> </div> `, data: { people: [{ key: 1, name: "Carl" }, { key: 2, name: "Carol" }, { key: 3, name: "Clara" }, { key: 4, name: "John" }, { key: 5, name: "Jacob" }, { key: 6, name: "Mark" }, { key: 7, name: "Steve" } ], selectedPerson: "", selectedPersonTwo: "" } });

 .required-field > label::after { content: '*'; color: red; margin-left: 0.25rem; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script> <body> <div id="app"></div> </body>

Answer 1

在我看來，您想使用雙向綁定，但是在中間它們之間要有更多的控制權。 我的建議是：

不要使用<select v-model="selectedPerson">
而是將它們拆分為<select :value="selectedPersonValue" @input="selectedPersonOutput> （這基本上是同一件事，但是您可以指定不同的輸入和輸出），其中selectedPersonValue可以是data()的計算屬性或常規屬性data()和selectedPersonOutput應該是在選擇值更改時將被調用的方法。

這樣，您可以直接決定每個步驟會發生什么。

PS：如果您想通過方法影響屬性selectedPersonValue ，則可以考慮將其更改為data()屬性並為其添加監視。 查看最適合您的方法。

如何動態使用v模型和v選擇

問題描述

1 個解決方案

解決方案1
0 2018-07-06 08:18:35

如何動態使用v模型和v選擇

問題描述

1 個解決方案

解決方案1 0 2018-07-06 08:18:35

解決方案1
0 2018-07-06 08:18:35