web-dev-qa-db-ja.com

VUE jsで配列内のデータのインデックスを取得する

特定のメソッドが呼び出されたときにタスクのステータスを変更したい。しかし、問題は、配列の特定の項目のインデックスを取得してそのステータスを変更できないことです。これは私のHTMLです：

_<div class="main" id="my-vue-app">
    <ul>
        <li v-for="task in completeTask">
            {{ task.description }} <button @click="markIncomplete">Mark as Incomplete</button>
        </li>

    </ul>
    <ul>
        <li v-for="task in incompleteTask">
            {{ task.description }} <button @click="markComplete">Mark as Complete</button>

        </li>
    </ul>
</div>
_

そして、これは私のVueです。

_<script>
    new Vue(
        {
            el: '#my-vue-app',
            data:
            {
                tasks: [
                {description:'go to market', status: true},
                {description:'buy book', status: true}, 
                {description:'eat biriani', status: true}, 
                {description:'walk half kilo', status: false}, 
                {description:'eat icecream', status: false}, 
                {description:'return to home', status: false}
                ]
            },
            computed: 
            {
                incompleteTask()
                {
                    return this.tasks.filter(task => ! task.status);
                },
                completeTask()
                {
                    return this.tasks.filter(task => task.status);
                }
            },
            methods: 
            {
                markComplete()
                {
                    return this.task.status = true;

                },
                markIncomplete()
                {
                    return this.task.status = false;
                }
            }
        }
    )
</script>
_

markComplete()とmarkIncomplete()を使用する必要がありますが、問題は、現在の要素のインデックスを取得してそのステータスを変更する方法を見つけられなかったことです。

javascriptarrayssortingvue.jsvuejs2
4
Delowar Hossain

v-forで2番目の引数を宣言する でインデックスを取得できます。

<li v-for="(task, index) in incompleteTask">
    {{ task.description }} <button @click="markComplete(index)">Mark as Complete</button>
</li>

    methods: 
    {
        markComplete(index)
        {
            return this.tasks[index].status = true;

        },


しかし、おそらくもっと単純な代替策は、単純にtaskを引数として渡すことです：

<li v-for="task in incompleteTask">
    {{ task.description }} <button @click="markComplete(task)">Mark as Complete</button>
</li>

    methods: 
    {
        markComplete(task)
        {
            return task.status = true;

        },
10
acdcjunior

RTFM：

v-repeatディレクティブを使用して、ViewModel上のオブジェクトの配列に基づいてテンプレート要素を繰り返すことができます。配列内のすべてのオブジェクトについて、ディレクティブはそのオブジェクトを$ dataオブジェクトとして使用して、子Vueインスタンスを作成します。これらの子インスタンスは、親のすべてのデータを継承します。したがって、繰り返し要素では、繰り返しインスタンスと親インスタンスの両方のプロパティにアクセスできます。さらに、レンダリングされたインスタンスの対応する配列インデックスになる$ indexプロパティにアクセスできます。

var demo = new Vue({
  el: '#demo',
  data: {
    parentMsg: 'Hello',
    items: [
      { childMsg: 'Foo' },
      { childMsg: 'Bar' }
    ]
  }
})
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>

<ul id="demo">
  <li v-repeat="items" class="item-{{$index}}">
    {{$index}} - {{parentMsg}} {{childMsg}}
  </li>
</ul>

ソース：

https://012.vuejs.org/guide/list.html

注：ディレクティブv-repeatは、Vue.jsの古いバージョンで使用できます:-)

0
Alexander Gavriliuk