标签: vue-reactivity

我的“Generateur”组件正在向我的“Visionneuse”组件发送道具。浏览器中一切正常，但我在控制台中看到以下消息：

Set operation on key "texteEnvoye" failed: target is readonly.\n

我真的不知道为什么会收到此消息，因为我将道具传递给了引用。\n这是我的组件：\n“Generateur”

<template>\n  <div>\n    <h1>G\xc3\xa9n\xc3\xa9ration d'une carte de voeux</h1>\n    <div class="board">\n      <Visionneuse :texteEnvoye="texte" :taille="0.5"/>\n    </div>\n    <textarea\n      :style="'width: 60%; resize:none;height: 100px;'"\n      v-model="texte"\n      placeholder="\xc3\x89crivez votre texte ici">\n    </textarea>\n  </div>\n  <div>\n    <button\n      v-if="lien.length == 0"\n      id="boutonObtenirLien"\n      v-bind:class="{ enCours: lienEnCours }"\n      class="btn first"\n      @click="obtenirLien">Obtenir le lien</button>\n    <p\n      v-if="lien.length > 0">\n      Votre carte de voeux est accessible au lien suivant:<br/>\n      <a :href="lien">{{ lien }}</a>\n    </p>\n  </div>\n</template>\n\n<script>\nimport Visionneuse from '@/components/Visionneuse.vue';\n\nimport axios from 'axios';\n\nimport {\n …

代码笔：https ://codepen.io/codingkiwi_/pen/XWMBRpW

假设你有一堂课：

class MyClass {
  constructor(){
    this.entries = ["a"];

    //=== example change triggered from INSIDE the class ===
    setTimeout(() => {
      this.entries.push("c");
    }, 1000);
  }
}

在组件中，您可以获得该类的一个实例：

const { reactive } = Vue;

const App = {
  setup() {
    const myobject = reactive(new MyClass());

    //=== example change triggered from OUTSIDE the class ===
    setTimeout(() => {
      myobject.entries.push("b");
    }, 500);
    
    return {
      myobject
    };
  }
}

DOM 中的 myobject.entries 数组将显示条目"a"和"b"，但不显示"c"

我刚刚开始使用 Vue 3 和 Composition API。

我想知道ref,toRef和之间有什么区别toRefs？

我陷入了反应性问题。我正在使用 Stein 在谷歌表格中创建后端。Stein 非常挑剔，希望以 [{}] 格式请求。我做了以下事情：

模板：

<div class="field">
  <label class="label">Model #</label>
  <div class="control">
    <input
      class="input"
      placeholder="Model #"
      v-model="form.ModelNum"
    />
  </div>
</div>

<div class="field">
  <label class="label">Bar Code</label>
  <div class="control">
    <input
      class="input"
      placeholder="Bar Code"
      v-model="form.Barcode"
    />
  </div>
</div>

<div class="field">
  <label class="label">Serial #</label>
  <div class="control">
    <input
      class="input"
      placeholder="Serial #"
      v-model="form.SerialNum"
    />
  </div>
</div>
//etc

JS

<script setup>
import { reactive, defineEmits, toRefs } from "vue";
import addRow from "../helperFunctions/addRow.js";

// Variables
let form = reactive({
  Equipment: "",
  Make: "",
  ModelNum: "", …

我需要显示item.title外部,<v-carousel>但我收到此错误消息:

[Vue警告]:属性或方法"item"未在实例上定义,但在呈现期间引用.通过初始化属性,确保此属性在数据选项或基于类的组件中是被动的.请参阅:https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

我检查了Stackoverflow搜索的结果,但我真的很难理解它.如果有人能通过这个例子向我解释,我将不胜感激.这是我的代码:

<v-carousel>
<v-carousel-item v-for="(item,i) in items" v-bind:src="item.src" :key="i">
</v-carousel-item>
</v-carousel>

<h1>TITLE: {{ item.title }}</h1>

<script>
  export default {
    data () {
      return {
        items: [
          {
            src: '/static/a.jpg',
            title: 'A',
            text: 'texta'
          },
          {
            src: '/static/b.jpg',
            title: 'B',
            text: 'textb'
          }
          {
      }
    }
  }
</script>

这就是我需要存档的内容:

一旦图像变为下一个 - 文本外的文本范围也应该改变.我试图检查范围之外的item数组的值,但它不起作用: <h1 v-if="(item,i) === 1">Lion</h1> <h1 v-if="(item,i) === 2">Ape</h1> 如何访问范围之外的当前轮播项的值？

I\xe2\x80\x99m 将映射传递给组件，然后发回新值并更新映射。这会触发地图上的手表，但传递的旧值和新值是相同的。

在这种情况下，手表是否可以接收旧值？

(function() {\n\nconst ui = {\nsetup() {\n  const map = reactive(new Map([\n    [\'width\', 800],\n    [\'height\', 400]\n  ]));\n\n  function onCompUpdate(evt) {\n    console.log(map.get(\'width\'), map.get(\'height\'), evt[0], evt[1]);\nmap.set(\'width\', Number(evt[0]));\n    map.set(\'height\', Number(evt[1]));\n  }\n  \n  watch(map, (n,o)=>{\n  console.log(n.get(\'width\'), n.get(\'height\'), \n  o.get(\'width\'), o.get(\'height\'));\n  });\n\n  return { map, onCompUpdate };\n  },\n};\n\nconst vueApp = createApp(ui);\n\nvueApp.component(\'base-input\', {\nprops: [\'some\' ], emits: [\'comp-update\'],\nsetup(props, { emit }) {\n\n  let chars = ref(Array.from(props.some.values()).join(\',\'));\n\n  function checkInput(val) {\n    emit(\'comp-update\', val.split(\',\'));\n    chars.value = val;\n  }\n\n  return { chars, checkInput };\n},\ntemplate: `<input type="text" spellcheck="false" …

我试图（深入）观察 Vue 3 中响应式对象的任何变化：

import { reactive, watchEffect } from \'vue\';\n\nconst settings = reactive({\n  panes: {\n    left: {\n      defaultAction: "openInOtherPane",\n    },\n    right: {\n      defaultAction: "openInThisPane",\n    },\n  },\n  showMenu: false,\n  isDrawerOpen: false,\n});\n\nwatchEffect(() => {\n  console.log(\'The new settings are\', settings);\n});\n\n// Try to change a setting (this does not trigger watchEffect)\nsettings.panes.left.defaultAction = "none";\n

这段代码有两个问题：

\n
• 设置更改时不会触发 watchEffect
\n
• console.log 以以下形式显示不可读的对象Proxy { <target>: {\xe2\x80\xa6}, <handler>: {\xe2\x80\xa6} }
\n

我也尝试过watch：

watch(\n  () => settings,\n  settings => {\n …

任务

我正在开发一个产品市场。每个产品都有一个 ID 和一系列与每个产品相关的信息。

有一个产品包的概念，简单地说就是一个产品是其他产品的捆绑。

在 GET PACKAGES 响应中，有一组与此包内的产品相关的 ID。在页面的其他位置，我请求产品列表，因此我已经有了所需的数据，我只需要连接两个数据集。

该任务涉及在 UI 中显示包以及每个产品的描述（位于 GET PRODUCTS 的另一个响应中），该描述通过两个数据集之间的 ID 连接。

设置说明

我有一个父组件，它调用“获取产品”和“获取包”。

我将包传递给可重用的 Vue 组件，以在 UI 中显示该包的基本信息。除此之外，我还将所有产品传递给组件，以便我们可以获得正确的产品描述以显示在包 UI 的预览中。

问题

当将产品列表传递到子组件时，我可以完美地控制台记录整个产品数组，但是当我尝试循环它们（通过 MAP 或 FOREACH）时，什么也没有发生。循环内没有控制台日志；就像循环根本没有运行一样。

父组件代码

<package 
    v-for="package in packages" 
    :key="package.id"
    :packages="package"
    :products="products"
></package>

// I get both sets of data in beforeOnMount and push it to the below variables
const packages = reactive<Array<Package>>([]);
const products = reactive<Array<Product>>([]);

子组件代码

props: {
    packages: Object as () => Package,
    products: Object as () => Array<Product> …

是否可以在 Vue 中声明一个响应式对象，然后将该对象的成员传递给可组合对象，同时保留响应性？

例如：

我声明一个“状态”类型：

type State = { myObjectList: Array<MyObject> }

然后在我的组件中初始化我的状态：

const state = reactive<State>{( myObjectList: new Array<MyObject>() )}

state.myObjectList在组件挂载时通过 API 调用填充的位置

我的问题是，是否可以传递state.myObjectList给可组合项，并且该可组合项是否知道对 内部元素所做的更改state.myObjectList？

即有一个可组合项，例如：

export default function useSimpleCalculator(list: Array<MyObject>){

  const dynamicSumValue = computed(():number => { 
    let sum = 0;
    list.forEach(el => {  sum += el.someValueThatChanges });
    return sum;
  });

 return { dynamicSumValue }

}

然后使用该可组合项，例如：

const {dynamicSumValue} = useSimpleCalculator(state.myObjectList);

并dynamicSumValue随着内部元素的更改而更新state.myObjectList

我尝试像上面那样实现，但是当我传递对象上的任何属性时state，它会在可组合项中失去其反应性。

将refs 传递给可组合项似乎可行（即const val …

我有一个反应值，我想将其存储在 pinia 商店中。

const data = ref({});
async function loadData() {
  fetch("...")
    .then((res) => res.json())
    .then((json) => (data.value = json));
}
loadData();

const myDataStore = useMyDataStore();
const { myData } = storeToRefs(myDataStore);

// Here I want to store data in the store, reactively
myData.value = data.value;

但当我这样做时，反应性就会消失。如何将值存储在商店中，以便myData每次更新时data都会更新？