#vue.js
Вопрос:
Я хочу запустить один из 3 методов, основанных на том, какие данные содержатся в описании. На данный момент он отлично работает, если данные являются «Видео», и если что-то еще, он запускает метод myClick2. Я пытаюсь добавить 3-й вариант, который проверяет, написано ли на нем «Плакат». Если там написано «плакат», чтобы запустить другой метод (myClicky). Что-нибудь еще, покажите myClick2.
new Vue({ el: "#app", data: { chocs:[] }, methods: { handleTileClick: function(){ alert("test"); }, myClick2: function(){ alert("test2"); }, myClicky: function(){ alert("tested"); }, } }) lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"gt;lt;/scriptgt; lt;div id="app"gt; lt;div class="card" v-on:click="choc.subdescription==='Video'?handleTileClick():myClick2()"gt;lt;/divgt; lt;/divgt; Ответ №1:
Вы можете определить новый метод, который принимает subdescription и возвращает вызываемую функцию. Это будет использоваться в качестве значения для обработчика щелчка:
new Vue({ el: "#app", data: () =gt; ({ chocs: [ { subdescription: 'Video' }, { subdescription: 'Poster' }, { subdescription: 'Other' } ] }), methods: { getOnClickFn: function(subdescription) { let fn; switch(subdescription) { case 'Video': fn = this.handleTileClick; break; case 'Poster': fn = this.myClicky; break; default: fn = this.myClick2; break; } return fn; }, handleTileClick: function() { alert("test"); }, myClick2: function() { alert("test2"); }, myClicky: function() { alert("tested"); } } }); lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"gt;lt;/scriptgt; lt;div id="app"gt; lt;div class="card" v-for="{ subdescription } in chocs" :key="subdescription" @click="() =gt; getOnClickFn(subdescription)()" gt;Click {{subdescription}}lt;/divgt; lt;/divgt;