标签: vue-reactivity

我使用以下数据创建了一个 vue 组件：

data: function () {
    return {
        hwshow: [false, false, false, false, false, false, false, false, false, false],
    };
},

以及切换这些值的方法：

methods: {
    fliphw: function (index) {
        this.hwshow[index] = !this.hwshow[index];
        console.log(this.hwshow);
    },
},

在 html 我有

<li v-show="hwshow[0]">foo bar</li>

我知道正在调用 fliphw 函数（因为 console.log），但是当 的值为hwshow[0]true 时 foo bar 仍然没有出现。当我切换到使用布尔值而不是布尔值数组时，它可以工作。为什么？如果我无法访问一组布尔值，还有什么其他解决方案可以解决这个问题？

我有一个Keyboard.vue包含许多Key.vue子组件实例的组件（每个键一个）。

在 中Key.vue，键实际上是一个<button>可以禁用的 html 元素。

通过单击我的应用程序中的某个按钮，我想重置键盘并再次启用所有按键。我认为将 a 设置v-if为falsethentrue再次 ( <keyboard v-if="BooleanValue" />) 会重新渲染Keyboard.vue及其所有 Key.vue 子组件实例。

事实并非如此。为什么不？

应用程序.vue

<template>
  <div class="app">
    ...
    <keyboard v-if="!gameIsOver && showKeyboard" />
    ...
  </div>
</template>

<script>
export default {
  components: {
    Keyboard
  },
  computed: {
    gameIsOver () {
      return this.$store.state.gameIsOver
    },
    showKeyboard () {
      return this.$store.state.showKeyboard
    }
  }

键盘.vue

<template>
  <section>
    <key class="letter" v-for="(letter) in letters" :key="letter" :letter="letter" /> …

我对 toRaw() 的反应性感到困惑。

应用程序.vue

<template>\n  <img alt="Vue logo" src="./assets/logo.png" />\n  <TheForm @newThing="addNewThing" />\n  <TheList :allTheThings="allTheThings" />\n</template>\n\n<script setup>\n  import TheForm from "./components/TheForm.vue";\n  import TheList from "./components/TheList.vue";\n\n  import { ref } from "vue";\n\n  const allTheThings = ref([]);\n  const addNewThing = (thing) => allTheThings.value.push(thing);\n</script>\n

TheForm.vue

<template>\n  <h3>Add New Thing</h3>\n  <form @submit.prevent="addNewThing">\n    <input type="text" placeholder="description" v-model="thing.desc" />\n    <input type="number" placeholder="number" v-model="thing.number" />\n    <button type="submit">Add New Thing</button>\n  </form>\n</template>\n\n<script setup>\n  import { reactive, defineEmit, toRaw } from "vue";\n\n  const emit = defineEmit(["newThing"]);\n\n …

Vue.deleteVue 3 的新 Reactivity API 中的替代方案是什么？

我有一个自定义组件，它接受modelValueprop 并发出update:modelValue事件。在父组件中，我传递一个数组：

测试组件.vue

<template>
  <div>
     <button @click="updateIt">Test</button>
  </div>
</template>

<script>
export default {
    props: {
       modelValue: Array
    },
    emits: ["update:modelValue"],
    setup(props, {emit}){
        return {
            updateIt(){
                emit("update:modelValue", [4,5,6])
            }
        }
    }
}
</script>

应用程序.vue

<template>
  <div>
     <test-component v-model="myArr"/>
     <ul>
         <li v-for="i in myArr" v-text="i"></li>
     </ul>
  </div>
</template>

<script>
import TestComponent from "./TestComponent.vue";

export default {
    components: {
        TestComponent
    },
    setup(props, {emit}){
        const myArr = reactive([1,2,3]);

        return {
            myArr
        }
    }
}
</script>

当我按下按钮时，列表不会更新，为什么？

这篇文章中有一个例子。它说正常的物体不会有“反应性”。

我在这个codesandbox中做了测试，发现对普通对象（甚至是普通字符串）的改变可以自动改变视图。

<template>
  {{ personName }} <!-- will change to Amy, why? -->
  {{ person.name }} <!-- will change to Amy, why? -->
  {{ personRef.name }}
  {{ personReactive.name }}
  <button @click="changeName('Amy')">changeName</button>
</template>

<script setup>
import { ref, reactive } from "vue";

let personName = "John";
const person = { name: "John" };
const personRef = ref({ name: "John" });
const personReactive = reactive({ name: "John" });
const changeName = (name) => {
  personName = name;
  person.name = name; …

我将 Vue 与 Vuex 一起使用。在一种情况下，我使用 Ajax 来获取表示值。路上的某个地方，可能是在computed不再有反应。

在我的组件中：

props: [ 'x', 'y' ],
template: `
  <div class="presentation">
    {{ presentation }}
  </div>
`,
computed: {
  presentation() {
    return this.$store.getters.presentation({ x: this.x, y: this.y });
  }
}

Vuex 商店：

const store = new Vuex.Store({
  state: {
    table: {
      data: []
    }
  },
...

Vuex 动作：

我用 ajax 调用一个 url 并返回一个承诺。我也犯了一个突变。

actions: {
  save: (context) => {
    let uri = 'some/uri';
    let params = {};
    let value = 'A value';

    return …

在 Vue.js 中，我有一个数据对象，它具有动态添加/编辑的属性，这些属性本身就是数组。例如，该属性的开头如下：

data: function () {
    return {
        vals: {}
    };
}

随着时间的推移，通过各种按钮点击等，vals可能如下所示（实际属性名称和值基于多种因素 100% 动态）：

vals: {
    set1: [
        {
            prop1: 123,
            prop2: 'hello'
        },
        {
            prop1: 456,
            prop2: 'bye'
        }
    ],
    set2: [
        {
            prop3: 'Why?!',
            prop4: false
        }
    ]
}

当数组属性（即set1和set2）发生更改时，我希望能够对这些更改做出反应。

例如，我可能会在代码中执行以下操作：

var prop = 'set1';

this.vals[prop].push({
    {
        prop1: 789,
        prop2: 'hmmm...'
    }
});

然而，当我这样做时，组件没有更新（我猜是因为我将一个对象推到对象子数组的末尾；而 Vue.js 似乎没有跟踪这些更改）。

我已经能够通过执行this.$forceUpdate();上述操作来强制组件做出反应push，但我想当涉及到被推到对象子数组末尾的对象时，必须有一种更雄辩的方式让 Vue.js 做出反应。

有谁知道更好的方法来尝试实现我想要实现的目标？谢谢。

因此，在 Vue 组件中，当您在模板中编写标签时，您可以像在普通 XML 中一样指定静态参数，或者可以通过在参数名称前面添加冒号来指定响应式参数。

现在，我偶然发现了这个Vuetify 示例，并使用了该v-menu组件。例如，该组件具有一个close-on-click属性，在此示例中，该属性被标记为反应性的。这是合乎逻辑的，因为在本例中，当您更改开关的位置时，该属性也会更新。

但是，您也可以指定一个常量。而且，由于常量值不会改变，因此在 Vue 中，它们不必是响应式的。但是，在这里，如果我指定close-on-click（不带冒号），它将无法正常工作。除非它是反应性的，否则它不会读取此属性。

我的问题是，为什么即使我们指定一个常量作为它的值，这个属性也需要被标记为反应性的？

那么，更准确地说：为什么<v-menu close-on-click=false不起作用，但是却<v-menu :close-on-click="false"起作用了？

false是一个常量，因此，该属性不应标记为反应性的。

我有一个接收一些道具并发出自定义事件的组件。我需要发出来将 props 的值作为参数传递。无论我做什么，我总是收到一个代理而不是原始值。这是我的实现的简化：

    //child-component
    <script setup lang="ts">
        import { ref, unref } from "vue";

        const props = defineProps<{
             category: { id: number, label: string};
        }>();

        const emit = defineEmits(["sendcategory"]);
        const category = ref(props.category);
        const cat = unref(category);

        function send() {
            emit("sendcategory", cat);
       
    }
    <template>
       <div  @click="send" >
            {{ category.value.label }}
       </div>
    </template>

这是父组件的示例

    //parent-component
    <script setup lang="ts">

        import { ref } from "vue";
        import ChildComponent from "./ChildComponent.vue";

        const item = { id: 1, label: "testlabel" }

        function getcategory(category: {id: number, …