Блог

Главная - Вопросы по программированию - Как передать пользовательские реквизиты компоненту в Vue из функции?

Как передать пользовательские реквизиты компоненту в Vue из функции?

#vue.js #vue-component

Вопрос:

Я хочу передать isReadonly логическое значение от первого компонента ко второму. И это не работает.

Отредактировано после ответа кафертайяра. Метод isReadonly перешел от methods к computed .

Первый компонент:

 <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>

Второй компонент:

 <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>

Ответ №1:

Используйте это:

 <PreliminaryInformationUsageCode :is-readonly="isReadonly"/>

и вместо того, чтобы использовать isReadonly функцию, определите вычисленное как:

 computed: {
   isReadonly() {
      return this.form.status.seq != 10;
   }
}

Комментарии:

1. Это все равно не работает. Нужно ли мне добавлять переменную в данные? Или я могу напрямую использовать его из реквизита?

2. У меня нет никакого сообщения об ошибке. Мое поле выбора всегда имеет значение только для чтения true.

3. Что происходит, когда вычисляется, как: computed: { isReadonly() { return false; } }

4. Это работает! Является ли блок метода плохим для таких условий?

5. this.form.status.seq Всегда отличается от 10?

Метки: