Wie kann ich Anweisungen an benutzerdefinierte Komponenten in VueJS binden?

Question

Also ich bin mit vuetify mit vue-cli und dies ist mein aktueller Komponentencode:

<template> 
<div> 
    <v-row> 
    <v-col xl3 md3 xs12> 
     <strong>{{field}}</strong> 
    </v-col> 
    <v-col xl9 md9 xs12> 
     {{value}} 
    </v-col> 
    </v-row> 
</div> 
</template> 

<script> 
    export default { 
     data() { 
      return { 

      } 
     }, 
     props: ['field', 'value'] 
    } 
</script> 

Und ich bin mit ihm in meinen Vorlagen wie diese

<template> 
<two-column field="Some Field" value="Some Value"></two-column> 
</template> 

<script> 
import TwoColumnRow from './vuetify_modifications/TwoColumnRow' 
... 
</script> 

Jetzt funktioniert alles perfekt, aber was ist, wenn Ich möchte die Rastergrößen dynamisieren? Wie zum Beispiel ich, wie

mit etwas tun Ist

<two-column field="Some Field" value="Some Value" sizes="xl3 md3 xs12"></two-column>

das möglich? Vielen Dank im Voraus.

Answer 1

Wie wäre es damit:

<foo :sizes="{ xl3: '', md3: '', xs12: '' }"></foo> 

Und:

<template> 
<div> 
    <v-row> 
    <v-col v-bind="sizes"> 
     <strong>{{field}}</strong> 
    </v-col> 
    </v-row> 
</div> 
</template> 

<script> 
    export default { 
     props: { 
      sizes: { type: Object, default:() => {} } 
      // ... 
     } 
    } 
</script> 

Answer 2

Eine Möglichkeit, dies zu erreichen, ist die Verwendung von berechneten Eigenschaften.

Zur Vereinfachung der Erstellung des Beispiels habe ich Farben verwendet, um darzustellen, was passiert. Da es so scheint, als ob Sie wirklich fragen, wie Sie Klassen oder wertbasierte Bedingungen in einer Komponente dynamisch anwenden können, sollte dies mit einigen Optimierungen funktionieren.

const TwoColumnRow = Vue.component('two-column', { 
 
    template: '#two-column-row-template', 
 
    data: function() { 
 
    return {} 
 
    }, 
 
    props: ['field', 'value', 'colors'], 
 
    computed: { 
 
    colorList: function() { 
 
     // Split the string of colors by space and return an array of values 
 
     return this.colors.split(' '); 
 
    } 
 
    } 
 
}); 
 

 
const vm = new Vue({ 
 
    el: '#app-container', 
 
    data: {} 
 
});

.red { 
 
    color: red; 
 
} 
 

 
.blue { 
 
    color: blue; 
 
}

<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script> 
 
<div id="app-container"> 
 
    <table> 
 
    <two-column field="toast" value="cheese" colors="blue red"></two-column> 
 
    </table> 
 
</div> 
 

 
<script type="x-template" id="two-column-row-template"> 
 
    <tr> 
 
    <td v-bind:class="colorList[0]">{{field}}</td> 
 
    <td v-bind:class="colorList[1]">{{value}}</td> 
 
    </tr> 
 
</script>

Dies läuft, so dass Sie einige Aussagen einfügen könnte {{color}} innerhalb der Komponente zu sehen, was gemacht wird.