Wie kann ich ternäre Operatoren in Eingabetext auf vue.js 2 hinzufügen?

Question

Meine vue Komponente wie folgt aus:

<template> 
    <div> 
     ... 
      <li v-for="category in categories"> 
       ... 
        <input type="radio" class="category-radio" :value="category.id" (category.id == categoryId) ? 'checked data-waschecked=true' : ''> 
       ... 
      </li> 
     ... 
    </div> 
</template> 
<script> 
    export default { 
     props: ['categories', 'categoryId'], 
    } 
</script> 

möchte ich Zustand in Eingabetyp Text hinzufügen. Ich benutze Bediener ternären wie oben Code

Wenn der Code ausgeführt wird, es nicht

Es funktioniert ist kein Fehler. Also ich bin verwirrt, es zu lösen

Vielleicht noch mein Code ist nicht korrekt

Wie kann ich es lösen?

Answer 1

Das Problem ist, dass Sie versuchen, JavaScript-Ausdruck in reinem HTML zu verwenden. Dies wird nicht funktionieren.

können Sie entweder binden jedes Attribut manuell wie folgt aus:

:checked="(expression) ? true : false" 

oder binden an eine berechnete Eigenschaft, die auf Ihrem Ausdruck hängt und gibt Ihre berechnete Eigenschaft. Alternativ können Sie ein Objekt mit einem zu vielen Eigenschaften binden und binden das ganze Objekt auf einmal (this is possible also):

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    categories: [ 
 
     { id: 1, name: 'one' }, 
 
     { id: 2, name: 'two' }, 
 
     { id: 3, name: 'three' } 
 
    ], 
 
    selectedId: 2 // for simplicity 
 
    }, 
 
    computed: { 
 
    attrs: function() { 
 
     return function(id) { // computed can also return a function, so you can use args 
 
     \t return (id === this.selectedId) ? { checked: true, 'data-waschecked': true } : {} 
 
     } 
 
    } 
 
    }, 
 
    mounted() { // log your element 
 
    console.log(document.querySelector('input[data-waschecked=true]')) 
 
    } 
 
});

<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 

 
<div id="app"> 
 
    <ul> 
 
    <li v-for="category in categories"> 
 
     <input type="checkbox" v-bind="attrs(category.id)"> 
 
    </li> 
 
    </ul> 
 
</div>