Comment passer des accessoires personnalisés au composant dans Vue à partir de la fonction ?
Viatcheslav Odinokov
Je veux passer la isReadonlyvaleur booléenne du premier composant au second. Et ça ne marche pas.
Edité après la réponse de cafertayyar. Méthode isReadonlydéplacée de methodsà computed.
Premier composant :
<template>
<PreliminaryInformationUsageCode :is-readonly="isReadonly" />
</template>
<script>
import PreliminaryInformationUsageCode from './form/PreliminaryInformationUsageCode.vue'
export default {
name: 'FormPage',
computed: {
form() {
return this.$store.getters['form/form']
},
isReadonly: function() {
//return true
return false
}
},
components: {
PreliminaryInformationUsageCode,
},
}
</script>
Deuxième volet :
<template>
<v-select
v-model="usageCodesSelected"
:items="usageCodes"
item-text="name"
item-value="code"
label="Label"
multiple
hint="Hint"
persistent-hint
v-bind:readonly="isReadonly"
>
<template v-slot:selection="{ item, index }">
<v-chip v-if="index === 0">
<span>{{ item.name }}</span>
</v-chip>
<span
v-if="index === 1"
class="grey--text text-caption"
>
(+{{ usageCodesSelected.length - 1 }} дополнительно)
</span>
</template>
</v-select>
</template>
<script>
export default {
name: 'PreliminaryInformationUsageCode',
props: {
isReadonly: {
Boolean
},
},
data: function() {
return {
usageCodesSelected: [
],
usageCodes: [
],
}
},
}
</script>
cafertayyar
Utilisez ceci:
<PreliminaryInformationUsageCode :is-readonly="isReadonly"/>
et au lieu d'utiliser la isReadonlyfonction, définissez un calculé comme :
computed: {
isReadonly() {
return this.form.status.seq != 10;
}
}