想象一下，我有一个包含 3 个阶段的订单 - 个人详细信息、订单详细信息、付款。

我想从前一个组件中切换下一个组件（希望调整“step”的值）

<Component1 v-if="step = 1"></Component1>
<Component2 v-else-if="step = 2"></Component2>
<Component3 v-else></Component3>

因此，根据我的观点，我是否可以将“step”的值传递给 component1 并执行类似的操作

<button v-on:click="step = 2">
   Submit
</button>

然后单击该按钮，更新我的主视图上的步骤值（包含 3 个组件），然后隐藏我的第一个已完成的组件并显示第二个组件？

感谢您的任何见解！

我正在使用 options api，当尝试访问计算属性中的 Vue 数据对象的属性时，我在类型检查中收到错误。

Property 'quantity' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, { item: unknown; total: unknown; menuItemCategories: any; }, Readonly<Record<never, any>>>'

该属性确实存在，因为页面能够使用计算属性正确加载和显示呈现的模板 - 只有类型检查器会抱怨。

组件代码（长度简化）：

import Vue from "vue";
export default Vue.extend({
  data() {
    quantity: 1,
  },

  computed: {
    total() {
      return this.item.price * this.quantity;
    }
  },
});

编辑

我已经能够通过使用该data属性作为对象来解决这个问题。

但这确实会产生一些问题，因为最佳实践是用作data返回对象的函数。同样的问题也适用于asyncData.

进一步的试验和错误表明我能够data通过该methods属性访问函数属性。但是，如果我使用mapGettersvuex 中的助手，它会抛出与计算属性相同的类型错误。

它们methods在计算属性内的类型中也不可用CombinedVueInstance。

tsconfig.json

// tsconfig.json
{
  "compilerOptions": { …

我不久前开始学习Vue JS

我在解决某些问题时遇到一些问题

在这种情况下，我需要创建一个事件来隐藏和显示特定对象中的长文本

我的应用逻辑如下

我正在向服务器发送请求

我得到答案

然后我将其写入 Vuex 存储

并在组件中使用 getter 和循环进行输出

如果有人遇到类似的情况，我将不胜感激。

这是我的代码的一部分

import {mapActions, mapGetters} from "vuex";\n\n\n<v-list three-line v-for="(comment, index) in product.comments.data" :key="comment.id" class="mb-3">\n\n    <v-list-item>\n       <p v-if="!readMoreActivated">{{comment.description.slice(0, 200)}}<v-btn @click="activateReadMore(index, comment.description)" x-small text color="grey">\xd0\x9e\xd1\x82\xd0\xba\xd1\x80\xd1\x8b\xd1\x82\xd1\x8c</v-btn></p>\n       <p v-if="readMoreActivated">{{comment.description}}</p>\n    </v-list-item>\n</v-list>\n\n\n\ncomputed: {\n        ...mapGetters("products", ["product"])\n\n    },\n\nmethods: {\n        activateReadMore(lineId, comment)\n        {\n            comment.findIndex((lineId) => {\n                return comment.slice(1, comment.length)\n            })\n            // this.readMoreActivated = true\n        },\n    },\n

我有一个 mapbox 弹出窗口，在弹出窗口内我想要一个按钮来调用 vue 组件内定义的方法。

我的弹出窗口：

const popup = new mapboxgl.Popup({ focusAfterOpen: false })
        .setLngLat(coordinates)
        .setHTML('<button id="button" @click="myMethod">Click here!</button>')
        .addTo(map);

我的方法：

myMethod() {
  console.log("clicked");
},

我能够向按钮添加一个事件侦听器，该按钮正在工作。但我没有得到在我的 Vue 组件中定义的函数执行。

我的事件监听器：

var button = document.getElementById("button");
      button.addEventListener("click", function() {
        console.log("clicked");
      });

我想翻译v-autocomplete当搜索返回任何内容时未找到数据的默认消息。我知道这是由于默认行为造成的，但我的应用程序通过i18n本地化库支持多种语言，因此我想将其完全本地化。

示例代码适用于自动完成组件：

<v-autocomplete
                class="form-select__region"
                :class="fieldName"
                dense
                :disabled="disabled"
                item-text="text"
                item-value="value"
                :items="getData"
                outlined
                single-line
                solo
                :value="value"
                @change="input(fieldName, $event)"
            >
            </v-autocomplete>

我对 Vue.js 很陌生，在开发我的第一个项目时，我偶然发现了一个我认为与组件生命周期相关的问题。

上下文如下：我正在使用带有组合 API 的 Vue 3。

我有一个“地图”组件，其中使用 d3.js 来显示图表。在我的 Setup() 方法中，我有 onBeforeMount() 和 onMounted()。在 onBeforeMount() 方法中，我想使用 Firestore 数据库中的数据作为图表中的值。第 47 行的 console.log 正确显示了数据。在 onMounted() 中，我计划放置 d3 图表。但是当我尝试访问 console.log 第 55 行中的数据时，我得到了未定义的信息...

理想情况下，我想从“地图”组件中从数据库中获取数据并使用它来创建图表，然后让组件渲染图表。然后我会有另一个名为“MapSettings”的组件，它将能够更改“Map”中的数据，例如过滤器等...并在图表中自动更新值。最后，两个组件将是兄弟组件并且具有相同的父组件因此“Map”和“MapSettings”处于同一层次结构级别。

但首先我需要理解为什么我变得不确定..任何帮助或建议将不胜感激！

我想将 2 个 props 传递给我的组件。两者都是 String，但只能传入 title props。我通过将 url 传递给 title props 来检查 posterUrl，它可以工作。但是当我将其作为海报发送时，无法收到标题。所以我确信这不是有问题的数据。

然后我尝试使用默认值，图像显示出来，但它们都使用默认值。我尝试过使用速记、v-bind 和标准使用，但没有任何效果。

组件看起来像这样

    app.component('item-movie', {
        props: {
            title: String,
            posterUrl: {
                type: String,
                default: "https://image.tmdb.org/t/p/original/5NYdSAnDVIXePrSG2dznHdiibMk.jpg",
            },
        },
        template:
            /*html*/
            `
        <div class="col-md" style="margin-bottom: 2rem; margin-top: 2rem;">
            <img class="img-fluid" style="min-width: 300px;" v-bind:src="posterUrl">
            <p style="margin-top: 1rem; margin-bottom: -0.3rem; color: white;">{{ title }}</p>
        </div>
        `,
    })

我这样用

        <item-movie v-for="movie in movies" :key="movie.id"
          :title="movie.title" :posterUrl="imageUrl+movie.poster_path">
        </item-movie>

简介：我正在探索Vue Js，并在尝试制作动态数据表组件时陷入困境，我面临的问题是我无法通过 props 传递组件并将其呈现在表中。

问题：所以基本上我想做的是从v-data-table中的 headers prop 传递一些自定义组件，例如：

headers = [
    { text: 'Name', value: 'name' },
    {
      text: 'Phone Number',
      value: 'phone_number',
      render: () => (
         <div>
           <p>Custom Render</p>
         </div>
     )
    },
    { text: 'Actions', value: 'actions' }
]

所以从上面的代码我们可以看到我想从Phone Number header中的渲染函数渲染该段落，我之前在React Js中做过这件事，但是如果有人可以指点我，我找不到在Vue Js中做到这一点的方法朝着正确的方向前进会很棒。先感谢您。

我有父/子组件，并通过代理和不使用代理绑定对象数组：

const selectedTags = ref([]);
const tags = [
    {
        id: 'efrwe',
    },
    {
        id: 'dhjhe23',
    }];

<Child :tags="tags" :selectedTags="selectedTags">

在子组件中，我将选定的元素从“tags”添加到“selectedTags”，它对源数组中的对象的引用！

props.selectedTags.push(tags[0]);

但后来我尝试比较同一个对象上的这个引用，我返回 false！

console.log(tags[0] == selectedTags[0]); // false

你说“好吧，你尝试比较代理对象和清除对象”，但我尝试与代理目标进行比较并再次返回 false！

console.log(tags[0] == selectedTags[0].target); // false
console.log(tags[0] == selectedTags.target[0]); // false

我也尝试使用“价值”

console.log(tags[0] == selectedTags[0].value); // false
console.log(tags[0] == selectedTags.value[0]); // false

我如何比较 vue 3 中同一对象的引用？

我想你明白我想要做的，计算返回非选定的项目：

let nonSelected =  computed(() =>
     props.tags.filter(t => props.selectedTags.every(s => s != t))
);

我正在尝试在 vue js 3 中创建一个自定义无线电组件，根据官方文档，它可以使用 v-model 来完成。我尝试应用它，但第一次渲染组件时，它不会检查所选值，但当我尝试选择另一个值时可以更新该值。

我的代码如下：

应用程序.vue

<template>
  <div>
    {{ picked }}
  </div>
  <RadioButton value="One" v-model="picked" />
  <RadioButton value="Two" v-model="picked" />
</template>

<script>
import RadioButton from "./components/RadioButton.vue";

export default {
  name: "App",
  components: {
    RadioButton,
  },
  data() {
    return {
      picked: "One",
    };
  },
};
</script>

单选按钮.vue

<template>
  <input
    type="radio"
    name="group"
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

<script>
export default {
  name: "RadioButton",
  props: ["modelValue"],
  emits: ["update:modelValue"],
};
</script>

我在这里模拟了我的代码。https://codesandbox.io/s/restless-cache-2svtiz?file=/src/components/RadioButton.vue你可以看到它。谢谢