Question

使用v-for时，我无法绑定索引和值...但是，当我回显数组时，它可以工作...

刀片文件内容：

<tr class="single-member" v-for='(member, index) in members' :index='index' >
        @{{ index }}
        <div class="field">
            <div class="control">
                <input class="input" type="text" placeholder="First name*" >
            </div>
        </div>
        <div class="field">
            <div class="control">
                <input class="input" type="text" placeholder="Last name*" >
            </div>
        </div>
        <div class="field">
            <div class="control">
                <input class="input" type="email" placeholder="Email*" >
            </div>
        </div>
        <div class="field">
            <div class="control">
                <input class="input" type="number" placeholder="Phone">
            </div>
        </div>
    </tr>

因此无法index进行解析，并且我的成员对象为空，字段为"name, surname, email, phone"

请注意，如果我使用@{{ members }}会起作用，但是当我想使用@{{ member }}或@{{ index }}却不起作用时，为什么会出现这种情况？

我遇到的错误是：

app.js：6103 [Vue警告]：属性或方法“索引”未在   实例，但在渲染过程中被引用。确保此属性是   在data选项中或对于基于类的组件，通过   初始化属性。看到：   https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

（位于Root中）

数据对象 app.js文件

data: function() {
    return {
        gdprChecked: false,
        level: 'beginner',
        teamName: '',
        members: [],
        formError: false,
        formErrorMessage: '',
        formSuccess: false,
        formSuccessMessage: '',
    }
},
mounted() {
    // must be minimum 1 user
    this.members.push({firstName: '', lastName: '', email: '', phone: ''});
},

工作代码，只有刀片文件更改为此

<div class="columns" v-for="(member, index) in members">
    <div class="column is-narrow">
        @{{ index + 1 }}
    </div>
    <div class="column">
        <div class="field">
            <div class="control">
                <input class="input" type="text" placeholder="{{trans('hackathon.firstName')}}" v-model="member.firstName">
            </div>
        </div>
        <div class="field">
            <div class="control">
                <input class="input" type="text" placeholder="{{trans('hackathon.email')}}"  v-model="member.email">
            </div>
        </div>
    </div>
    <div class="column">
        <div class="field">
            <div class="control">
                <input class="input" type="text" placeholder="{{trans('hackathon.lastName')}}"  v-model="member.lastName">
            </div>
        </div>
        <div class="field">
            <div class="control">
                <input class="input" type="text" placeholder="{{trans('hackathon.phone')}}"  v-model="member.phone">
            </div>
        </div>
    </div>
</div>

仍然不确定为什么＃1不能正常工作，而＃2却...有什么想法吗？

Answer 1

尝试 <tr class="single-member" v-for='member in members' :key='member.id' >

这将指向member.id 记住成员必须是成员数组

vue-list key

laravel刀片模板中的Vue.js v-for循环

1 个答案: