Доступ к одному элементу из списка дочерних элементов ссылки в nuxt. js - PullRequest
Новая
       7

Доступ к одному элементу из списка дочерних элементов ссылки в nuxt. js

0 голосов
/ 09 июля 2020

Я не очень хорошо знаком с nuxt или vue, но я учился на документации и примерах.
Я пробовал искать по такому количеству статей, но не могу найти простой способ сделать это

Мой компонент - 

<template>
    <div ref="parent">
        <div v-for="post in posts" v-bind:key="post.id">{{ post.title }}</div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            posts: [
                {id: 1, title: 'title 1'},
                {id: 5, title: 'title 2'},
                {id: 7, title: 'title 3'}
            ]
        };
    },
    methods: {
        doSomething(){
            // I have to use the index of div but I want to use post.id
            const div = this.$refs.parent.children[0];
        }
    }
};
</script>

Теперь я хочу получить доступ к дочернему элементу моего ссылочного div с помощью post.id В настоящее время я обращаюсь к дочерним элементам с помощью индекса.

Будет много дочерних элементов, поэтому я не хочу добавлять ссылку на все из них.

Компонент в примере является дочерним, и я обращаюсь к его методу в родительском компоненте и передавая post.id оттуда в качестве аргумента в методе doSomething(post.id)

Может ли кто-нибудь помочь мне в этом?
Заранее спасибо

1 Ответ

0 голосов
/ 09 июля 2020

Передайте идентификатор методу, а затем используйте его для извлечения элемента, который вы хотите изменить, из массива, объявленного в data (). 

<template>
    <div ref="parent">
        <div v-for="post in posts" v-bind:key="post.id">
           {{ post.title }}
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            posts: [
                {id: 1, title: 'title 1'},
                {id: 5, title: 'title 2'},
                {id: 7, title: 'title 3'}
            ]
        };
    },
    methods: {
        doSomething(id){
           this.posts.map(x => {
               if(x.id === id){
                  //edit X here, where x is the post
                  console.log(x,'here I am');
               }
            return x
          });
        }
    }
};
</script>

Надеюсь, это поможет !!

...