1

У меня есть массив в родительском компоненте, который я рендерю в шаблоне, и мне нужно, чтобы при нажатии на ссылку vue-router с идентификатором динамического атрибута id я открыл новый компонент, содержащий только тот элемент массива, который соответствует id. Мой код не работает. Родительский компонент:

<template>
    <div>
        <button @click="addPost">Add</button>
        <div v-for="item, index in arr" :key="item.id">
            <p>{{item.title}}</p>
            <router-link :to="'/blog/' + item.id">Link</router-link>
        </div
        <router-view :arr="arr"></router-view>
    </div>
</template>

export default {
    import Post from './components/Post'
    components: {
        'app-post': Post
    },
    data() {
       return {
           arr: []
       }
    },
    methods: {
        addPost() {
           this.arr.push({
               title: this.title,
               id: Math.Random()
           })
        }
    }
}

Дочерний компонент:

<template>
    <div v-for="item, index in arr" :key="index">
        <p>{{item.title}}</p>
    </div>
</template>

export default {
   props: {
       arr: Array
   },
   created() {
       return this.arr.find(item => {
           return item.id === this.$route.params.id
       })
   }
}
3
  • Неправильные манипуляции входным параметром - arr. В этом случае лучше всего определить локальное свойство в data (например newarr), которое использует значение входного параметра arr в качестве начального. Затем можно его использовать в template как newarr. 12 июн 2019 в 16:09
  • Я не пойму как массив правильно отфильтровать
    – RavenTheX
    12 июн 2019 в 16:17
  • кстати неправильно хук created возвращать , вы в нем можете вызвать метод в, котором и будет какая-то ваша логика, а еще лучше поместите это в виде метода в computed и и прогоняйте циклом его (если должно вернуться сразу много элементов
    – bobanobi4
    13 июн 2019 в 8:14

2 ответа 2

1
<template>
    <div v-for="(item, index) in newArr" :key="index">
        <p>{{item.title}}</p>
    </div>
</template>

export default {
   props: {
       arr: Array
   },
   computed: {
       newArr(){
          return this.arr.filter(item => {
             return parseInt(item.id) === this.$route.params.id
          })
       }
   }
}
3
  • Строгое равенство не работает, потому что разные типы данных, а если заменить на не строгое то работает, но данные реактивно не изменяются, и выводит только первый элемент массива
    – RavenTheX
    13 июн 2019 в 8:36
  • скорее всего элемент там всего один внутри массива, странно, что не реактивятся, должны, хотя возможно вашим рендером управляет как раз vue-router и реактивность происходит именно по переходу по ссылке, так как сравнение идет именно с параметрами роутера
    – bobanobi4
    13 июн 2019 в 8:46
  • 1
    Оказалось все проще, нужно было просто в computed вернуть отфильтрованный массив)
    – RavenTheX
    13 июн 2019 в 8:47
1

Решение:

<template>
    <div v-for="item, index in singlePost" :key="index">
        <p>{{item.title}}</p>
    </div>
</template>

export default {
    props: {
        arr: Array
    },
    computed: {
        singlePost() {
            return this.arr.filter(post => {
                return post.id == this.$route.params.id
            })
        }
    }
}
1
  • 1
    Вместо filter используйте find, тогда v-for не надо будет использовать.
    – user256824
    13 июн 2019 в 11:21

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.