标签: vue-events

我正在构建“撤消删除”操作的逻辑。为此，我使用事件总线将事件发送到两个不相关的组件，如下所示：

Undo.vue:

EventBus.$emit(`confirm-delete-${this.category}`, this.item.id);

事件（this.category）的名称基于来自父级（ConfirmDeleteModal.vue）的道具，然后按如下方式接收：

CategoryA.vue

created() {
   EventBus.$on('confirm-delete-category-a', (id) => {
     this.confirmDelete(id);
   });
},

CategoryB.vue

created() {
    EventBus.$on('confirm-delete-category-b', (id) => {
      this.confirmDelete(id);
    });
},

我的问题：由于某种原因，事件category-a被发出和接收两次（category-b工作正常）。我必须confirm-event不断地监听，因此在收到事件或仅监听后我无法删除事件监听器$once。有什么想法可以解决这个问题（也许使用 Vuex）？谢谢！

我正在尝试从孩子向父母发出多个参数。最好的方法是什么。

孩子

 getUpdated(value, type) {
                  
    if (type === 'students') {
     this.students = value.map(val => val.id);
    }
                  
    if (type === 'programs') {
     this.programs = value.map(val => val.code);
    }
    this.$emit('selectedOptions', students:this.students, programs:this.programs );
    },

家长

 onSelectedOption(students, programs) {
    if (students !== undefined || students.length > 1) {
      this.students = students;
  } 
  if (programs !== undefined || programs.length > 1) {
    this.programs = programs;
  }
},

我正在vue.js项目中使用vue-multiselect组件，正在使用v-on指令在change事件上执行功能，

<multiselect v-model="selected" :options="projects" :searchable="false" :custom-label="customLabel" track-by="name" v-on:change="executeLoader">
<template slot="customLabel" slot-scope="{ customLabel }"><strong>{{ option.name }}</strong></template>   
</multiselect>

我在这里有完整的示例代码：https : //codesandbox.io/s/yjjon0vzxj

该v-on:change正在使用<select>组件，但它停止了vue-multiselect的工作！我尝试过，v-on:click="executeLoader"但是也没有用。

我正在尝试创建一个customCombobox像普通组件一样工作的组件，只需添加v-combobox一个即可 - 用户按下按键后tab，它将自动选择第一个选项（如果有）。

到目前为止我所做的看起来不错，但v-model在这个领域不起作用（总是如此null）。

<template>
  <v-combobox ref="combobox" :rules="rules"
              @keydown.tab.prevent="selectFirst"
              :value="innerValue" :label="label"
              :items="items"

  >

  </v-combobox>
</template>
<script>
module.exports = {
  props: ['value', 'label', 'items', 'rules'],
  data() {
    return {
      innerValue:null,
    }
  },
  watch:{
    value(_new){
       this.innerValue = _new
      this.$emit('input',[_new])
      this.$emit('change')
    }
  },
  methods: {
    selectFirst() {
      var combobox = this.$refs.combobox
      var filteredItems = combobox.filteredItems
      if (filteredItems.length){
          this.innerValue = filteredItems[0]
      }
    }
  },
  computed: {

  }
}
</script>

你知道为什么吗？

如何在<b-nav-item-dropdown>Bootstrap-Vue 中使用点击事件，如下所示？我查看了 Vue.js 文档，但找不到<b-nav-item-dropdown>.

<b-nav-item-dropdown text="nav_title">
    <b-dropdown-item href="#">
        a
    </b-dropdown-item>
    <b-dropdown-item href="#">
        a
    </b-dropdown-item>
</b-nav-item-dropdown>

我正在使用 Nuxt js SSR 来构建一个应用程序，我安装了 Vue 事件插件，但是当我发出一个事件时，它在侦听器上运行两次。创建的钩子也运行两次。

使用的模块：Axios、Auth、Toast

子组件

methods: {
  initPlaylist(songs) {
    console.log(songs)
  }
},
mounted () {
  this.$events.$on('playAll', data => {
    this.initPlaylist(data.songs) //runs twice
  })
}

父组件

method () {
    playAll (songs) {
      this.$events.$emit('playAll', songs)
  }
 }

我该如何解决这个问题？我需要你的帮助。

我正在尝试有条件地阻止使用@submit.prevent. 我有一个看起来像这样的通用表单模型（最小化一点）：

<v-form v-model="valid">
   <div>
      <div v-for="(field, i) in fieldConfig" :key="`model-form-`+i">
         <fe-label v-if="field.label">{{field.label}}</fe-label>
         <component 
            :is="field.component" 
            v-bind="field.attrs" 
            v-model="item[field.field]"
          />
       </div>
   </div>
</v-form>

从父母那里调用：

<model-form
   idProperty="id"
   @done="finishRename"
   model="myModel"
   :fieldConfig="fieldConfig"
   :htmlSubmit="false"
/>

我在搜索中看到了一些类似的东西，但没有什么是正确的，而且我对 Vue 很陌生。任何帮助表示赞赏。谢谢！

当我使用“emit”时，Vue 抱怨我正在寻找功能相同的替代方案

这将是一个待办事项列表

代码：\n

<button @click="$emit(\'delete-todo-event\', todo.id)">Button</button>

\n

浏览器控制台中的警告：

\n

runtime-core.esm-bundler.js?5c40:38 [Vue warn]：无关的非发出事件侦听器（deleteTodoEvent）已传递给组件，但无法自动继承，因为组件渲染片段或文本根节点。如果侦听器仅用作组件自定义事件侦听器，请使用“emits”选项声明它。at <ToDos todoEntries= (9)\xc2\xa0[代理、代理、代理、代理、代理、代理、代理、代理、代理] onDeleteTodoEvent=fn<绑定的deleteToDoItem> > at <应用程序>

\n