Vuev-for一旦通过资料更新就不会更新-编程知识-白鹭情

当我将新资料推送到 playlistTracks 阵列时，我在更新 v-for 时遇到问题。我正在将 playlistTracks 从 App.vue 通过 playlist.vue 传递到 trackList.vue，一旦我运行add()将新物件推送到 playlistTracks 的函式，但它不会呈现到站点。在 Vue devtools 中，我可以看到它通过新资料传递给 trackList.vue 但 v-for 只是不更新??并在现场呈现它。

应用程序

<script setup>
import Playlist from './components/playlist.vue';

let playlistTracks = [
    {
        name: 'name4',
        artist: 'artist4',
        album: 'album4',
        id: 4,
    },
    {
        name: 'name5',
        artist: 'artist5',
        album: 'album5',
        id: 5,
    },
];

function add() {
    const track = {
        name: 'newTrack',
        artist: 'newArtist',
        album: 'new Album',
        id: 10,
    };
    playlistTracks.push(track);
}
</script>

<template>
    <div>
        <h1>Ja<span >mmm</span>ing</h1>
        <div >
            <button @click="add">Test add</button>
            <div >
                <Playlist
                    :playlistTracks="playlistTracks"
                />
            </div>
        </div>
    </div>
</template>

播放串列.vue

<script setup>
import TrackList from './trackList.vue';

const props = defineProps({
    playlistName: String,
    playlistTracks: Array,
});
</script>

<template>
    <div >
        <input value="New Playlist" />
        <TrackList :tracks="props.playlistTracks" :isRemoval="true" />
        <button >SAVE TO SPOTIFY</button>
    </div>
</template>

trackList.vue

<script setup>
import Track from './track.vue';

const props = defineProps({
    tracks: Array,
    isRemoval: Boolean,
});

let tracksList = props.tracks;
</script>

<template>
    <div >
        <Track
            v-for="track in tracksList"
            :track="track"
            :key="track.id"
            :isRemoval="props.isRemoval"
        />
    </div>
</template>

uj5u.com热心网友回复：

看起来您正在将 Composition API 用于单个档案组件。一个重要的注意事项是，在官方 Vue.js 档案中，有关于对回应式资料的参考的重要信息：

这意味着您的阵列很可能不会保留反应性，因此即使阵列本身成功更新，Vue 也不会检测到这些更改，因此它可以知道重新渲染！

他们给出的解决这个问题的例子如下：

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count  ">{{ count }}</button>
</template>

const obj = reactive({ count: 0 })

由此，我们可以得出一个可能的结论，即您的解决方案将包含两个不同的更改。首先，在您的App.vue档案中，将阵列包装在reactive()呼叫中：

/*...*/

import { reactive } from vue;

let playlistTracks = reactive([
    {
        name: 'name4',
        artist: 'artist4',
        album: 'album4',
        id: 4,
    },
    {
        name: 'name5',
        artist: 'artist5',
        album: 'album5',
        id: 5,
    },
]);

/*...*/

然后，只需洗掉中不必要的附加属性trackList.vue：

<script setup>
import Track from './track.vue';

const props = defineProps({
    tracks: Array,
    isRemoval: Boolean,
});
</script>

<template>
    <div >
        <Track
            v-for="track in props.tracks"
            :track="track"
            :key="track.id"
            :isRemoval="props.isRemoval"
        />
    </div>
</template>

免责宣告：我对单档案组件缺乏经验，尤其是对 Composition API，因此需要对上述解决方案进行一些测验。

uj5u.com热心网友回复：

要reactivity在 Vue 3 组合 API 中维护，您必须将资料包装在其中之一ref，reactive否则 Vue 将检测不到任何更改。ref 可用于原始型别和非原始型别，而反应式只能用于非原始型别。只需将您的 playlistTracks 资料包装在 ref 中，该组件应根据 playlistTracks 中的任何更改重新呈现。

import {ref} from 'vue'; 

  const playlistTracks = ref([
    {
        name: 'name4',
        artist: 'artist4',
        album: 'album4',
        id: 4,
    },
    {
        name: 'name5',
        artist: 'artist5',
         album: 'album5',
        id: 5,
    },
])