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 檔案中，有關于對回應式資料的參考的重要資訊：

需要使用 Reactivity API 顯式創建反應狀態。類似于從setup()函式回傳的值，在模板中參考時，refs 會自動解包：

這意味著您的陣列很可能不會保留反應性，因此即使陣列本身成功更新，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,
    },
])

標籤：Vue.js

上一篇：在所有html正文中包含我的Javascript影片，以便在滾動頁面時保持不變

下一篇：Vue單擊事件未正確發射到div