Vue.js组件未更新

jvidinwx 于 2023-03-13 发布在 Vue.js

关注(0)|答案(1)|浏览(216)

我有一个Vue组件，它使用从另一个文件导入的布尔变量，但无论我做什么，它似乎都不会在变量更改时更新。
变量确实更新了，我通过使用setInterval将其记录到控制台来确认。
我认为在Vue 3中这应该是有效的，然而在使用ref（）或添加watch（）时它都不起作用。

<script>
import * as NetworkManager from "@/lib/network-manager";
import MainMenu from "@/components/main-menu/main-menu.vue";
import GameView from "@/components/game/game-view.vue";

export default {
    name: "App",
    components: {
        MainMenu,
        GameView,
    },
    data() {
        return {
            NetworkManager,
        };
    },
};
</script>

<template>
    <p>{{ NetworkManager.connected }}</p>
    <game-view v-if="NetworkManager.connected" />
    <main-menu v-else />
</template>

vue.js

来源：https://stackoverflow.com/questions/75699821/vue-js-component-not-updating

1条答案

按热度按时间

jtw3ybtb1#

您的NetworkManager对象变为React式，但您必须更新Vue的属性。否则，. Vue无法检测更改。请检查下面的练习场。
正确的方法是：
1.使用lib/network-manager库中的组合物API添加VueReact性
1.仅从Vue例程更新NetworkManager
1.使用自定义或Vuex/Pinia存储

const { createApp } = Vue

const MyObj = { counter: 0 }

function add() {
  MyObj.counter++;
  console.log(MyObj.counter)
}

const App = {
   data() {
      return {    
          MyObj
       } 
   },
   methods: {
      add() {
        this.MyObj.counter++;
        console.log(this.MyObj.counter)
      }
   }
}

const app = createApp(App)
app.mount('#app')

#app { line-height: 1.75; }
[v-cloak] { display: none; }

<div id="app" v-cloak>
MyObj: {{MyObj.counter}}<br/>
<button onclick="add()">+1</button> outside Vue<br/>
<button @click="add()">+1</button> inside Vue<br/>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

赞(0）回复(0）举报 2023-03-13

我来回答

Vue.js组件未更新

1条答案

相关问题

热门标签

最新问答