Question

我在表单中有vue multiselect的vue组件。我想禁用/启用它，直到填写了两个其他字段。

我已经通过组件内部的总线值访问了这些数据，但是当我尝试使用它时，我从未得到预期的真假答案。

我正在尝试使用由disabled控制的enableKeywords来更新selectedTopic && questionTitle属性，这两个值都来自根或其他组件，我可以看到他们的数据在通过Vue dev工具创建此组件的根目录。

多选组件

<template>
  <div>
    <multiselect 
    v-model="internalValue" tag-placeholder="Add this as new tag" placeholder="Search" 
label="name" track-by="id" :options="options" :multiple="true" :disabled="enableKeywords">
    </multiselect>
  </div>
</template>

<script>
  import Multiselect from 'vue-multiselect'
  export default {
    components: { Multiselect },
    props: ['value'],
    data () {
      return {
        internalValue: this.value,
        options: [],
        selectedTopic: null,
        questionTitle: null,
        enableKeywords: selectedTopic && questionTitle
      }
    },
    mounted(){
      axios.get('/vuekeywords').then(response => this.options = response.data);
      bus.$on("send-topic", selectedTopic => this.selectedTopic = selectedTopic);
      bus.$on("send-title", questionTitle => this.questionTitle = questionTitle);
    },
    watch: {
      internalValue(v){
        bus.$emit('send-keywords', v);
        this.$emit('input', v);
      }
    }
  }
</script>

Answer 1

巴士附有两个活动，$ emit＆amp;美元。 $接收这两个参数后，然后将enableKeywords切换为true

Answer 2

为了在未填充所需的任何属性时disabled为真，您应该否定布尔值selectedTopic && questionTitle。

:disabled="!(selectedTopic && questionTitle)"

从Vue组件中的总线值获取布尔值

2 个答案: