vue js将数据传递到组件

艾哈迈德·伊马德·图伊

你好,我将数据传递到组件“模态”时遇到问题,我使用带有bootstrap-vue组件的模态,并且我需要传递索引,这是我尝试做的

<table class="table table-striped" v-show="Questions.length!=0">
<tr v-for="Question in Questions">
  <td>{{$index + 1}}</td>
  <td>{{ Question.text }}</td>
  <td>
  <button v-on:click="showmodal = true"  class="btn btn-default" >Manage</button>
  <modal :show.sync="showmodal"  width="400">
    <div slot="modal-header" class="modal-header">
      <h4 class="modal-title">Manage Question</h4>
    </div>
    <div slot="modal-body" class="modal-body">
    <div class="input-group col-lg-6">
      <input type="text" class="form-control"  value="{{ Questions[$index].text }}"></input>
      <span class="input-group-btn"><button v-on:click="AddQuestion"  class="btn btn-default">Save Question</button></span>
    </div>
    </div>
    <div slot="modal-footer" class="modal-footer">
    <button type="button" class="btn btn-default" v-on:click='showmodal = false'>Exit</button>
    <button type="button" class="btn btn-success" v-on:click='showmodal = false'>Custom Save</button>
    </div>
  </modal>
  <button class="btn btn-danger" v-on:click="DeleteQuestion($index)">Delete</button>
  </td>
</tr>

提示:传递给index中的模式的数据是最后一个索引,即使该模式位于循环内

crabbly

使用Vue道具:http//vuejs.org/guide/components.html#Props

在您的示例中:

<modal :show.sync="showmodal" :index="$index" width="400">
    ...
</modal>

然后在您的Vue模态组件中:

props: ['index']

然后,您将可以访问index组件内部,就像其他任何属性一样:this.index

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

将数据传递到组件Vue.js

来自分类Dev

将数据传递到根Vue类组件

来自分类Dev

Vue将数据传递到子组件

来自分类Dev

Laravel刀片模板将数据传递到Vue JS组件

来自分类Dev

在vue.js 2.0中将数据传递到组件的textarea

来自分类Dev

将数据传递到Vue模板

来自分类Dev

将数据传递到Vue模板

来自分类Dev

如何从Vue.js的父组件将数据传递到类星体轻敲编辑器中?

来自分类Dev

VueJs-使用vue-router将数据传递到subRoutes组件

来自分类Dev

Vue.js - 如何将数据传递给组件?

来自分类Dev

vue.js 中如何将数据传递给组件?

来自分类Dev

将数据传递给vue.js方法

来自分类Dev

vue.js将数据从父单个文件组件传递到子组件

来自分类Dev

将数据从Vue.js中的父组件传递到动态组件

来自分类Dev

Vue / Laravel-将数据从刀片传递到Vue组件

来自分类Dev

将数据从Vue实例传递到Vue组件

来自分类Dev

Vue 如何将子组件和父组件数据传递给方法

来自分类Dev

将数据传递给createApp(vue)

来自分类Dev

将数据从父级传递到vue.js中的子级组件

来自分类Dev

vue.js-将数据从子级传递到组件的正确方法?

来自分类Dev

如何将数据从 Laravel 传递到 Vue.js 组件 v-for

来自分类Dev

将数据从 Node-Express 后端传递到 Vue 组件

来自分类Dev

Vue 中如何将数据从组件传递到实例

来自分类Dev

数据未传递到Vue组件

来自分类Dev

Vue.js将绑定数据传递给Click事件处理程序

来自分类Dev

无法将数据从 Vue.JS 中的拥有组件和父上下文传递到插槽

来自分类Dev

Vue.js:将数据从一个子组件传递到具有相同父组件的另一个子组件吗?

来自分类Dev

将数据从Laravel传递到vue

来自分类Dev

如何将数据从vuex存储通过模块传递到vue组件?

Related 相关文章

热门标签

归档