Vue.js数组在变异中更新后消失
Vue.js是一种流行的前端开发框架，它提供了一种响应式的数据绑定机制，使得数据的变化能够自动更新到视图中。在Vue.js中，数组的变异操作（如push、pop、splice等）会被Vue.js所监测到，并且会触发视图的更新。
然而，有时候我们会遇到一个问题，就是在对Vue.js数组进行变异操作后，数组中的数据会消失。这是因为Vue.js在进行数组变异操作时，只能监测到一部分变化，而无法监测到所有变化。具体来说，Vue.js只能监测到以下几种数组变异操作：
- push：向数组末尾添加元素
- pop：从数组末尾移除元素
- shift：从数组开头移除元素
- unshift：向数组开头添加元素
- splice：在指定位置插入或删除元素
如果我们使用其他的数组变异操作，例如直接通过索引修改数组元素的值，或者使用数组的length属性改变数组的长度，Vue.js就无法监测到这些变化，从而导致视图不会更新。
为了解决这个问题，Vue.js提供了一种解决方案，即使用Vue.set或this.$set方法来进行数组元素的更新。这个方法可以让Vue.js监测到数组的变化，并且触发视图的更新。具体使用方法如下：
// 在Vue组件中使用Vue.set或this.$set方法更新数组元素
Vue.set(array, index, value);
this.$set(array, index, value);其中，array是要更新的数组，index是要更新的元素的索引，value是要更新的新值。
除了使用Vue.set或this.$set方法外，还可以使用数组的splice方法来进行数组元素的更新。这种方法也能够被Vue.js所监测到，并且触发视图的更新。具体使用方法如下：
// 使用splice方法更新数组元素
array.splice(index, 1, value);其中，array是要更新的数组，index是要更新的元素的索引，1表示要删除的元素个数（这里是1个），value是要更新的新值。
总结起来，当我们在Vue.js中对数组进行变异操作时，为了确保数组中的数据能够正确更新到视图中，我们需要使用Vue.set、this.$set或splice方法来进行数组元素的更新。这样，就能够避免数组在变异中更新后消失的问题。
推荐的腾讯云相关产品：腾讯云云开发（Tencent Cloud Base），它是一款云原生的后端云服务，提供了丰富的云开发能力，包括云函数、数据库、存储、云托管等，可以帮助开发者快速构建和部署应用。了解更多信息，请访问腾讯云云开发官网：腾讯云云开发。
相关·内容
根据的说法，使用filter应该是很好的。但我的不起作用：(尝试单击Remove One，然后单击Filter One，然后返回Remove One，然后如您所见，Remove工作，但Filter不工作)
new Vue({
el: '#app',
data() {
return {
answers: ['a', 'b', 'c']
}
},
methods: {
removeOne() {
this.answers.shift();
// conso
浏览 0提问于2019-01-01得票数 0
回答已采纳
1回答
当我设置strict: true时，我会得到错误：
vue.js:525 [Vue warn]: Error in watcher "state"
(found in root instance)
warn @ vue.js:525
run @ vue.js:1752
update @ vue.js:1720
notify @ vue.js:584
reactiveSetter @ vue.js:814
Transform.resize @ transform.js:169
e.resize @ map.js:343
e._onWindowResize @ map.js:12
浏览 2提问于2016-12-29得票数 1
回答已采纳
我有一个组件，在其中我使用v-for循环对象数组。
<div v-for="item in goods" class="ui fluid card" :key="item.id" :id="item.id">
<div v-for="badge in item.badges" :key="badge.id" class="ui labels">
<a
class="ui label"
浏览 0提问于2018-12-12得票数 4
回答已采纳
2回答
我一直在阅读vue文档，并开始编写一些代码来测试我的知识。我曾尝试编写一个在挂载时设置数据成员的组件，但它似乎没有像预期的那样工作。组件数据成员“profile”始终为空。我的直觉告诉我这可能是关于范围的东西，但不确定：
Vue.component('profile-grid',
{
template: '<section> {{profiles}} </section>',
//Data es la parte privada del documento. Props la parte publica que se d
浏览 0提问于2018-07-02得票数 3
回答已采纳
1回答
在我的vue.js应用程序中，我尝试交换两个论坛行，如下所示：
export default {
data() {
return {
forums: []
}
},
methods: {
increment(forum, index) {
ForumService.increment(forum)
.then(() => {
浏览 10提问于2017-01-26得票数 11
回答已采纳
我对vue.js有个问题。我有它，所以当您添加一个新项时，它会保存到本地存储中，但我也希望它在编辑输入项时保存到本地存储中。我觉得这应该是因为v型车的原因，但它不起作用。
<template>
<div class="hello">
<h1>TODO</h1>
<input type="text" name="" value="" placeholder="E.g do homework..." v-model="input"
浏览 2提问于2022-08-14得票数 0
我在Vue.js中有一个应用程序，其中有一个这样的App.vue：
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
user: null,
}
},
methods: {
getUser() {
axios
浏览 6提问于2022-08-08得票数 0
回答已采纳
这是我在父组件中的代码：
<div
v-for="measurement
in measurements"
:key="measurement.id"
>
<graph-component
浏览 4提问于2021-11-29得票数 0
回答已采纳
当我点击messageIncompleted按钮时，它可以工作，但当我点击messageCompleted按钮时，数据就消失了。你能帮我解决这个问题吗？
messageIncompleted() {
this.messages = this.messages.filter(messages => ! messages.completed );
this.disabledIncomplete = true;
},
messageCompleted() {
this.messages = this.messages.filter(messages => mess
浏览 6提问于2019-07-10得票数 0
1回答
我有一个选择输入与3个选项和3个文本输入。ideia是:我选择了所需的属性(例如: A)，并且只有此输入将为用户启用，其他输入将被禁用。
然后单击“计算”按钮，显示禁用的输入，然后根据我插入的属性(在本例中，这个值总是123)显示该输入的计算值。
import React, { useState } from "react";
import "./styles.css";
export default function App() {
const [models, setModels] = useState([
{ name: "A"
浏览 2提问于2020-09-21得票数 1
回答已采纳
1回答
我正在用Vue.js做一个杯子游戏，里面有N个杯子，其中一个里面有骰子。
<cup cupid="a" @onGameStateChange="onGameStateChange" ref="cup" />
<cup cupid="b" @onGameStateChange="onGameStateChange" ref="cup" />
<cup cupid="c" @onGameStateChange="onGameStateChange&#
浏览 0提问于2018-03-23得票数 0
1回答
我试图模仿一个简单的排序算法，并使用React setState实时存储排序数组(作为“输出”)，间隔为100 as，这样它就可以在屏幕上显示为算法可视化器。排序后的数组可以显示在控制台中，但未相应地进行实时更新。我怎么才能解决这个问题？
const [output, setOutput] = useState([]);
const timer = (ms) => new Promise((res) => setTimeout(res, ms));
const Simple_Sorting_Algo = (n) => {
const array = [
浏览 2提问于2022-02-09得票数 1
似乎我在vue中加载外部umd组件时遇到了问题。
我尝试做一些类似的事情，比如
这对使用vue2和webpack的我来说很有效
现在我使用的是Vue3/Vite和上面问题中相同的源码。
但是当解析外部组件promise时，我得到以下错误：
vue.js:1184 [Vue warn]: Unhandled error during execution of async component loader
at <AsyncComponentWrapper>
at <DemoComponent>
at <HelloWorld msg="He
浏览 5提问于2020-12-30得票数 2
我的应用程序目前从web服务下载数据。接收到的数据使用后台串行队列进行处理。
当用户进入后台模式并使用NSCoder进行此操作时，我还希望将数据保存到文件系统中。根据苹果的建议，我在应用程序委托的ApplicationDidEnterBackground方法中包含了保存文件逻辑。
但是，由于没有立即调用后台线程暂停，所以在调用保存到文件系统之前，我在确保数据不发生变化时遇到了问题。
例如，重新刷新客户端数据并返回2000+记录(简单数据方案)。但是，在运行时，用户按Home按钮，App进入后台，尝试将数据保存到文件系统中。
在后台线程的块处理中，我包含了在将客户端添加到数组时记录的逻辑，以及包
浏览 5提问于2014-06-06得票数 0
回答已采纳
1回答
我在使用时遇到了一个小问题，这里是和my 。
场景-我希望我的用户点击一个按钮将图像交换到画廊中的第一个图像。
例如。用户单击按钮并将图像从位置3移动到图像位置1。包括小缩略图、中等图像(主查看器)和大预览图像。
Problem --我尝试过的所有东西似乎都不起作用。我真的找不到任何方法来交换索引，当我手动交换索引时，什么也不会发生。
FYI -我可以使用push和pop向查看器添加和删除图像，我只是不能以编程方式用另一个设置(交换)第一个图像。
以下是我尝试过的一些例子。
export class AppComponent implements OnInit {
@ViewChil
浏览 2提问于2021-09-08得票数 1
回答已采纳
1回答
VueJS从查询参数中添加数据
、、、、
我正在开发一个小型的纯客户端VueJS应用程序，当数据输入到应用程序中时，它使用VueRouter更新URL，这样用户就可以使用URL刷新页面并在刷新页面时将数据重新加载到应用程序中。数据存储在查询参数中，例如：
.../app.html#/?time=300&time=300&distance=300&distance=300&unit=m&unit=m
数据由router根据需要进行分析，但是当我将数据添加到空的performance数组时，标记中的:class属性将引发
TypeError:无法读取未定义属性的“长度”
其中undefine
浏览 6提问于2016-12-21得票数 3
回答已采纳
2回答
所以，我只是在经历一个反应过程。第一次学习这个框架，所以这可能是一个愚蠢的问题。下面是用于更新存储在状态中的对象上的属性的代码，该属性是一个对象数组。
const [squares, setSquares] = React.useState(boxes)
function toggle(clickedSquare) {
setSquares(prevSquares => {
return prevSquares.map((square) => {
return square === clickedSquare ? {...squar
浏览 5提问于2022-04-30得票数 2
回答已采纳
1回答
我正在使用Material表来呈现从API>检索到的数据。有一个表单可以添加新的条目，但是当它添加到数据中时，表没有更新/重新呈现，我不知道原因。
这是为简洁/清晰而编辑的..。
const [data, setData] = useState();
useEffect(() => {
const fetchSummary = async () => {
setLoading(true);
const response = await axios
.get<
浏览 3提问于2022-02-17得票数 0
回答已采纳
我使用Vue.js作为扩展运算符，以便创建一个新的数组，并在其中找到一个将分配给selectedEmployee数据属性的值：
selectEmployee(id) {
const employees = [...this.employees];
this.selectedEmployee = employees.find(employee => employee.id === id);
},
无论哪种方法，通过selectedEmployee修改v-model值都会修改保存在paginatedEmployees属性上的记录，该属性的定义如下：
async fetchEmploy
浏览 0提问于2019-05-18得票数 0
回答已采纳
2回答
我正在使用Laravel，并希望创建一个简单的编辑应用程序来编辑帖子。我正在使用Vue.js 2绑定数据，但不知何故它无法显示数据-而且我不确定哪里出了问题。
当我使用Vue.js的@{{ postData.title }}显示数据时，它会在页面上显示标题。但我希望在输入中显示数据，以便可以编辑。
路由和一切都很好，因为我得到了正确的URL，并且我可以在Vue.js中显示数据，而不是在文本框中。提前谢谢。
这是我的HTML：
<div id="postEdit">
<div class="container">
<div
浏览 18提问于2018-01-21得票数 0
我正在构建一个MVP，这是我第一次做网络开发。我正在使用Vue2和Firebase，到目前为止，一切都进行得很顺利。
然而，我遇到了一个我无法独自解决的问题。我知道它应该如何工作，但不能把它写成代码，希望你们能帮助我理清思路。到现在为止，我感到难以置信的困惑和越来越沮丧。
所以让我们看看我得到了什么：
子组件我已经构建了一个子组件，它是一个包含三个文本区域的表单。为了保持它的简单性，只包含了一个我的代码片段。
<template>
<div class="wrap">
<form class="form">
浏览 6提问于2020-11-06得票数 0
3回答
假设我们有两个对象：
const state = {
fishes: { /* some obj data */ },
animals: { /* some obj data */ }
const animals = { /* some NEW data */ }
在Vuex中有一个方法replaceState()，根据，它接受一个参数并用该对象替换状态。
以下将产生什么结果：
replaceState({ ...state, animals })
更具体地说，{ ...state, animals }到底是做什么的？
为了提供一些上下文，我从问题的答案中选择了这个例子。在这个问题
浏览 0提问于2019-04-15得票数 2
回答已采纳
我正试着在ag网格中预先配置一个列过滤器，一个简单的文本“等于”过滤器来显示与某些指定文本匹配的行，我已经做到了这一点。
但是，一旦我用一组新的行替换了模型数据，我的过滤器就消失了。
我尝试以两种方式更新我的模型数据：
通过替换绑定rowData属性的值(我使用的是Vue.js)
调用api.setRowData(newRows)
这两种情况都会导致列筛选器丢失。
是否有方法在不丢失列过滤器的情况下更新模型数据？
浏览 12提问于2017-07-13得票数 9
回答已采纳
2回答
我一直在读关于避免状态变异的不同方法的文章。其中一种方法是使用扩展运算符(.)避免使用的方法之一是推送。但是，在还原器中，我需要向嵌套结构中的数组中添加一个项，我无法正确地实现concat，所以我尝试了以下代码：
export default function (state=[],action){
if (action.type === 'SELECTED_DROP') {
let updated = [ ...state];
updated[action.payload.queryIndex].items.push(action.payload.i
浏览 6提问于2016-09-19得票数 2
回答已采纳
我正在尝试创建一个不可变的类。不用再多说了：
#import "MatrixRow2.h"
@implementation MatrixRow2
@synthesize rows;
-(MatrixRow2*) initWithFractionNumberArray:(NSArray*)array
{
if (self = [super init]) {
rows = array;
}
return self;
}
-(MatrixRow2*) rowByMultiplyingByFractionNumber:(Fraction
浏览 0提问于2012-04-21得票数 0
回答已采纳
3回答
尝试修改数组中的对象值条件在某些数组上覆盖不起作用，下面是我的代码片段 const removeAction = (target, array, name) => {
let mutation = JSON.parse(JSON.stringify(array));
mutation.map( obj => {
if(obj.value === target.value) {
console.log(obj)
obj.checked = false
浏览 71提问于2021-01-05得票数 1
在使用vue.js时，如何定义属性id号呢？我想$refs读取id="20"值。我希望console.log是21,10,15。去
看：
var app = new Vue({
el: "#app",
data: {
fruit: [{
id: 21,
name: 'Peach'
}, {
id: 10,
name: 'Apple'
}, {
id: 15,
name: 'Lemon'
}],
b
浏览 0提问于2018-01-20得票数 0
回答已采纳
我正在和socket.io和react一起工作。我在componentDidMount()中设置了侦听器，但不知何故，setState()函数并没有触发更新。当我记录data时，我可以看到从服务器发送的数据。下面是我的代码： this.state = {
list: []
};
public componentDidMount() {
this.socket = io('https://mybackendurl.com');
this.socket.on('an-event', data => {
console.l
浏览 16提问于2020-01-17得票数 0
我编写了一个程序，用来播放在后台任务中使用委托处理的歌曲队列。我向AppController发送回复，以移动NSSlider显示正在播放的歌曲的进度，并删除刚才播放的NSCollection View实体(歌曲)。大多数情况下效果很好，但是在2到3首歌之后；实体消失了，但其余的对象不会重新排列(在屏幕上移动)，直到我使用鼠标或键盘将主屏幕聚焦。对于其他类似的问题，我使用了几个建议，并且得到了相同的答复。我现在使用的代码：
-(void) songPlayer:(SongPlayer *)player removeEntity:(DesktopEntity *)entity {
int
浏览 2提问于2014-08-09得票数 0
回答已采纳
比方说，我的状态如下。
constructor(props) {
super(props);
this.state = {
setting_a: "value-1",
setting_b: "color-green"
}
}
当我更改特定设置的状态(例如setting_a)时，我不希望其他设置(例如setting_b)消失。因此，在更改状态时，我还指定了其他设置。(使用...state扩展运算符很容易)。
this.setState( {...this.state, setting_a: "value-2"});
但
浏览 0提问于2018-10-11得票数 1
回答已采纳
我正在对我的用户类做一个PFQuery来获取背景中的图像。
我有不同的组，所以我的目标是迭代这些组并获得它们的特定imageData，以便在我的UITableView中使用它们。
在我的PFQuery中，我使用另一个数组temp:[NSData]来存储这个数组中的元素，然后将临时附加到数组的groupImages:[[UIImage]]数组中。
执行以下查询：
注意：member:[[AnyObject]]存储每个组的objectId。
let memberImageQuery = PFUser.query()
memberImageQuery?.whereKey("objectId&
浏览 7提问于2016-01-10得票数 0
2回答
Vue范围新鲜
、、、
我只是在jquery中使用vue.js。我的情况是，我尝试用jquery向main.html注入侧栏html代码(里面有vue语法)。但是，在我将sidebar.html注入main.html之后，vue.js无法编译注入的vue的语法。有人能帮我解决这个问题吗？vue有角scope.apply那样的功能吗？
浏览 8提问于2017-01-20得票数 1
回答已采纳
我正在学习，反应和制作待办程序等，但所有的教程只显示使用过滤器删除数组中的项目。我会给你看简单的代码。
const ProductItem = () => {
const [users, setUser] = useState([
{ id: 1, name: "jenny" },
{ id: 2, name: "tom" },
{ id: 3, name: "juan" },
]);
const removeUser = (user) => {
//this is filter way
浏览 2提问于2020-07-12得票数 1
回答已采纳
2回答
我有一个父组件，需要根据日期对子组件进行排序。我已经实现了对组件进行排序，但是这些组件的状态在单击排序按钮时仍然是固定的。
例子：
我有桌子
第一行{名称: foo，日期: 06/16/2022}第二行{name : bar，date :06/12/2022}
分拣后
第一行{名称: foo，日期: 06/12/2022}第二行{name : bar，date : 06/16/2022}
名称保持不变，日期被排序。
父组件
export default class RonusBows extends React.Component {
constructor(props) {
su
浏览 13提问于2022-06-16得票数 1
回答已采纳
5回答
我有一个Vue.js应用。此应用程序正在使用Vuex进行状态管理。我的商店看起来是这样的：
const store = new Vuex.Store({
state: {
items: []
},
mutations: {
MUTATE_ITEMS: (state, items) => {
state.items = items;
}
},
actions: {
loadItems: (context, items) => {
浏览 41提问于2018-06-09得票数 15
回答已采纳
构建一个用户上传图像/视频的站点，在处理该内容的组件中，我在上传后将图像加载到页面中，这样用户就可以确保他们想要发布图像，并且可以选择在他们愿意的情况下删除它们。我最初把它作为一个基于类的视图，一切都按预期工作，但是现在，在更改为一个功能组件之后，在上传图像之后，React似乎没有注意到对imageLinks的更改(尽管控制台显示imageLinks正在添加)，直到我更新了像post标题这样的其他内容之后，它们都按预期加载进来了。一旦加载，如果我单击删除按钮，立即响应更新，照片/视频不再显示，如预期。
对此行为为何如此古怪，有何看法？事实上，deleteMedia函数工作得很好，这确实让我感到
浏览 5提问于2022-02-19得票数 1
回答已采纳
1回答
我正在试验Vue.JS，并将组件动态组合在一起。
有一个奇怪的问题，尽管它似乎正在正确地更新数据，但是如果我通过调用splice()删除其中一个框，它总是删除呈现的HTML中的最后一个项。
这里有一个小提琴的例子。我在用Chrome做测试。
只是为了子孙后代，下面是Vue组件代码：
Vue.component('content-longtext', {
template: '#content-longtext',
props: {
model: { type: String, required: true },
update: { ty
浏览 2提问于2017-09-12得票数 0
回答已采纳
最近，我尝试创建一个包含多个字符串的数组，表示AcceptLanguage头。我需要将另一种用户指定的语言推到数组的开头，以使其具有最大的优先级。
到目前为止我已经
function getRequestLangs(){
//get languages from browser
$accLangs = explode(',',$_SERVER['HTTP_ACCEPT_LANGUAGE']);
$requestedLanguages = array();
foreach($accLangs as $key => $lang
浏览 3提问于2013-08-09得票数 1
回答已采纳
5回答
你好，我使用父子通信。在父级，我有一个数组，它表示图形数据。
我的问题是，当我更改数组中的一个项时，我不会触发子组件应用程序。在演示中，我创建了不起作用的示例。当我单击update时，我想更新子组件图。
我的孩子部分
import { Component, OnInit, Input, OnChanges } from "@angular/core";
import * as Highcharts from "highcharts";
import { ChartService } from "./chart.service";
@Compon
浏览 4提问于2020-10-28得票数 2
回答已采纳
1回答
我是一个新手，全栈开发人员在一个基本的购物车前端任务。
当我单击addtoCart时，我的cartItems数组没有更新，它是状态的一部分。正在调用addtoCart函数，但未进行更新。也未显示任何错误
我的购物车组件是
export default class Cart extends Component {
render() {
const {cartItems} = this.props
return (
<div>
{cartItems.length === 0 ? (
浏览 0提问于2020-08-06得票数 0
1回答
我已经创建了这个代表我当前案例的要点。基本上，我有一个带有详细信息的对象，在这个细节中，我有一个从列表中选择的项目。我有不同类型的列表。并且选择也与用户有关。
因此，我调用一个突变来更改所选项目，突变按预期工作，但我的UI仍然过时。
types.graphql
type User @model {
id
userObjectSelection: [UserObjectSelection!]!
}
type Object @model {
id
name
userObjectSelection: [UserObjectSelection!]!
selectionTyp
浏览 1提问于2017-12-22得票数 2
我想知道是否有一种方法可以在相同的函数中使用push，我在这里尝试过，但是它没有工作
下面是代码的一个示例
this.storeS.getItensByCateg(paramId).subscribe((resB: any) => {
scrollTo(0, 300);
this.slicedItems = [];
for (let i = 0; i <= 200; i++) {
if (resB[i]) {
this.slicedItems.push(resB[i]);
浏览 1提问于2022-04-27得票数 0
回答已采纳
1回答
组件在状态更改后不更新
、、、、
我试图分派一个操作来修改状态下的“矩阵”数组，数组正在被修改，但是只有在我硬编码MUp()函数中返回的数组时，组件才会被更新。
减速机：
export const initialState = {
board: {
matrix: [
[4, 2, 0, 0],
[4, 2, 4, 0],
[4, 0, 16, 2],
[4, 2, 32, 0],
],
},
};
export const board = (state = initialState.board, action) =
浏览 2提问于2021-03-17得票数 0
回答已采纳
2回答
在不删除注释/构建新注释的情况下，是否可以在PDFKit中更改FreeText注释的文本(即contents)？
在PDFView中查看时，以下代码段不会更改批注的内容
let url = Bundle.main.url(forResource: "Test", withExtension: "pdf")!
let document = PDFDocument(url: url)!
for index in 0..<document.pageCount {
let page: PDFPage = document.page(at: index)!
浏览 15提问于2018-07-24得票数 9
问题
在我的Vue.js + TypeScript项目中出现了以下错误：
<my-input> misses props: value
组件定义
我遵循了关于在组件上使用Vue.js的v-model文档，如描述的。
MyInput.vue
我想使用v-model关键字的组件如下所示：
<template>
<div>
<input :value="value" @input="$emit('input', $event.target.value)" />
</div>
&
浏览 10提问于2020-09-08得票数 1
回答已采纳
2回答
我想知道如何在vue中使用过滤器。
我知道计算机，当我使用它的时候，但我的问题是
我使用这段代码对水果数组进行排序，而不是使用computed
<li v-for="fruit in fruits.sort() ">{{fruit }}</li>
它运行了，我得到了正确的结果
但是控制台通知我有错误
[Vue warn]: You may have an infinite update loop in a component render function.
(found in <MyFilter> at C:\xampp\htdocs\p
浏览 2提问于2017-04-24得票数 7
回答已采纳
我在练习vue js。这是vue.js代码
new Vue({
el: '#people',
data: {
var1: 0,
var2: null,
var3: 'Hello',
var4: 'Yassss'
},
computed: {
var5: function() {
let var1 = 0;
if(this.var2 != null){
var1++;
}
console.log(this.var3);
return var1;
}
}
});
这是html代码
<p&
浏览 1提问于2022-04-23得票数 -1
这是我的可创建组件：
function optionsForSelect(field) {
return field
.values
.map((fieldOption) => {
return {value: fieldOption, label: fieldOption};
});
}
function PatientSelectInput({field, options, value, onChange, disabled}) {
const className = field.id + '-select';
ret
浏览 0提问于2018-02-13得票数 0
1回答
我有一个组件，用于将项添加/删除到收藏夹中。它运行得非常好，但用户无法看到他/她是否将该项目添加到收藏夹中(如果该项目是收藏夹，则显示一个星型图标；如果没有，则显示一个空图标)。我该如何积极地做这件事？如果用户单击它，我希望我的图标改变它的类。
这是我的代码：
构成部分：
<template>
<span :class="isFavorite
? 'mdi mdi-star favorite'
: 'mdi mdi-star-outline'"
class="fa
浏览 1提问于2018-12-03得票数 0
回答已采纳
这是我的设置：
const ParentComponent = ({ post_id }) => {
const { data: post } = useGetPost(post_id); // custom hook with useQuery under the hood
return (
<div>
{post.status === 'published' && (
<div className="margin-bottom">
<Chil
浏览 6提问于2022-11-06得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
