计算属性在Vue Devtools中定义，但无法通过mounted()挂钩中的“this”访问
计算属性是Vue.js中一种特殊的属性，用于根据其他属性的值计算出一个新的值。它可以在Vue实例的数据对象中定义，并且可以通过Vue Devtools进行查看和调试。
在Vue Devtools中定义计算属性的方式是通过在Vue实例的计算属性选项中进行定义。计算属性选项是一个包含各个计算属性的对象，每个计算属性都是一个函数，函数的返回值就是计算属性的值。计算属性可以依赖于其他的响应式数据，当依赖的数据发生变化时，计算属性会重新计算。
然而，由于计算属性是在Vue实例中定义的，而mounted()是Vue生命周期钩子函数，它在Vue实例挂载到DOM后执行。在mounted()钩子函数中，可以通过this访问到Vue实例的属性和方法，但无法直接访问到计算属性。
如果需要在mounted()钩子函数中访问计算属性的值，可以通过this.$data来访问Vue实例的数据对象，然后通过计算属性的名称来获取计算属性的值。例如，如果计算属性的名称是computedValue，可以通过this.$data.computedValue来获取计算属性的值。
需要注意的是，通过this.$data来访问计算属性的值是一种绕过Vue实例的封装机制的方式，不推荐在正式的开发中使用。通常情况下，应该尽量避免在mounted()钩子函数中直接访问计算属性的值，而是在模板中使用计算属性的值。
推荐的腾讯云相关产品和产品介绍链接地址：
相关·内容
1回答
未重新计算的Vue JS计算属性
、、、、
我有一个Laravel / Vue JS应用程序，它集成了谷歌地图组件以及Vuetify数据表组件。Vue实例还有一个计算属性，用于计算Google的点数，该属性基于由Vuetify数据表计算的另一个计算属性。
视图刀片中的Vue组件代码：
<v-data-table :ref="model + 'Table'" v-model="selected" :headers="headers" :items="collection" :pagination.sync="pagination"
浏览 0提问于2019-06-10得票数 1
回答已采纳
我希望在我的Vue文件中有一个小注册表，并决定使用Vue提供的Vue.observable函数(是的，我可以使用Vuex，但首先我想尝试不使用)。现在，当我在创建后(当然使用Vue.set )将属性添加到我的注册表时，我发现我的属性的反应性很难预测：
这确实如预期的那样起作用：
const state = Vue.observable({fromObservable: ''})
...
computed:
fromObservable: () => state.fromObservable
...
In mounted:
state.fromObser
浏览 4提问于2020-10-08得票数 1
回答已采纳
我试着从我在vue的路径中获取元数据。
例如，在routes.js中：
{ path: '/product/:productSlug',
name: 'product.slug',
meta: { layout: "no-snackbar" },
hide: true,
component: require('~/pages/checkout/product'), },
我需要访问的是no-snackbar。
然后，在App.vue中，我正在检查是否设置了：
mounted () {
浏览 3提问于2019-11-05得票数 1
回答已采纳
突然，发射器停止工作：
event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();
import { EventBus } from '../event-bus';
...
mounted() {
this.getCart();
}
...
methods: {
getCart() {
axios.get(`${app.api_erp_url}/cart/${this.cartId}`).then((response) => {
浏览 6提问于2020-10-30得票数 1
回答已采纳
1回答
Vuex吸气剂未定义
、、、
我是Vue.js的新手，经历了Vuex模块和Axios的问题。我有一个"post“组件，它从路由器检索一个片段，然后用Axios获取数据，然后用Vuex Getters检索数据。
我能够成功地检索数据，但是在我的DevTools，"TypeError:无法读取未定义的“的属性'name‘上仍然看到了这个错误
由于这个错误，我无法将this.post.name传递给Vue-Meta。
码
Post.vue
computed: {
...mapGetters(["post"]),
},
mounted() {
const slu
浏览 0提问于2020-06-15得票数 2
回答已采纳
2回答
最近，我设计了一个web，将用户分为" user "/"admin“两个角色来登录。
不同的角色会登录相同的页面，但会看到不同的按钮和函数。
MainPage.vue是容器，所以我将ajax称为"/init“以获取用户信息，然后提交到Vuex商店。
然后Content.vue是MainPage.vue内部的子页面。它将通过$store.state.user消息显示不同的按钮。
但是，我想根据用户的角色在mounted阶段调用Content.vue中不同的api。
但是这个角色还没有准备好，这个角色在这个阶段被ajax称为"/init“。
总体流程是
//
浏览 1提问于2018-01-22得票数 4
回答已采纳
2回答
我如何从Vue单文件组件中存根某些方法(特别是getter)，以便使用mocha/expect进行单元测试？
我面临的问题是:我有一个带有get方法someData的组件
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import SomeService from '@/services/some.service'
@Component()
export default class MyApp extends Vue {
浏览 5提问于2020-02-10得票数 4
2回答
我第一次尝试类星体，并尝试在模块中使用Vuex，但是我不能访问$store属性，也不能使用...mapState。我得到了以下错误“无法读取未定义的属性”日志“，尽管我可以看到Vue Devtools上存在承诺日志。
这是我的store\index.js
import Vue from 'vue';
import Vuex from 'vuex';
import logbook from './logbook';
Vue.use(Vuex);
export default function (/* { ssrContext } */) {
浏览 1提问于2019-10-08得票数 2
1回答
我正在尝试将一个事件绑定到一个新呈现的动态元素，下面是我的尝试。
<div id="app">
<a href="#" @click="loadData">Load Data</a>
<ul>
<li class="collections" v-for="item in collections" :key="item.id">{{ item.name }}</li>
</ul>
浏览 0提问于2019-05-17得票数 0
1回答
嵌套的对象反应性
、、
我的vue应用程序有以下设置 var store = {
...
state: {
currentCustomer:{},
},
}; 当前客户的属性是名为payment method的对象 应用程序： var app= new Vue({
el:'#application',
data: {
sharedState: store.state
}
}); 和几个组件： Vue.component('user_search', {
template: '#user_search-template
浏览 26提问于2019-12-11得票数 0
我有一个Vue实例，在这个实例中，我想让所有组件都可以访问
方法
对象
我写了这个：
import mqtt from 'mqtt'
new Vue({
el: '#app',
methods: {
foo: function() {
console.log("Hello Foo!");
}
mqtt: mqtt.connect('mqtt://server:8083')
},
render: h => h(App),
router
});
不幸的是
浏览 0提问于2018-11-29得票数 1
回答已采纳
2回答
在我的App.vue中，我将发送一个Vuex操作，从我的API以及用户的role中检索一个user，如下所示：
async mounted() {
const userToken = localStorage.getItem('token');
await this.getUserRole(userToken);
await this.getUserImage(userToken);
},
我编写了一个getter，它只返回保存在用户对象中的当前角色，如下面的getRole: state => state.user_role.role。
我想要
浏览 0提问于2019-07-08得票数 0
回答已采纳
1回答
目前，我有一个父组件，它呈现子组件，并将一个组件(称为Modal.vue)作为槽传递给子组件。
Parent.vue
<ChildComponent :id='1>
<modal slot="modal" :postTitle="'test'" />
</ChildComponent>
Child.vue
export default {
props : ['id'],
data(){
return {
modalHeading : "Heading"
}
}
<
浏览 1提问于2019-11-27得票数 6
回答已采纳
有一个用于Vue2的similar question，建议使用$options。 但它似乎不适用于Vue 3。 首先，Vue 3 documentation说，$options是只读的。 因此，当我试图在组件挂载时初始化实例中的工具提示时，我得到了非常奇怪的行为，当工具提示显示在最后创建的组件时，所以似乎$options是以某种方式“全局”的？ 当将tooptip放到data中时，一切正常，但很明显，工具提示不应该是被动的，我想把它放在data之外。 <template>
<i
:class="['bi ', icon, hover
浏览 13提问于2021-10-11得票数 1
回答已采纳
首先，我将学习如何使用Vue.js 2和Axion使用WP。我设法初始化了一个请求，并在v指令中显示了我所有的帖子。试图从来自json请求的post列表中创建一个简单的筛选器，我无法访问这些数据：
var App = Vue.extend({});
var postList = Vue.extend({
template:'#post-list-template',
data (){
return {
posts: null
}
},
mounted (){
浏览 6提问于2021-01-25得票数 2
回答已采纳
1回答
我使用Vue.js和Chart.js，以便从Firebase检索一些数据并将其显示在图表上。这是我的密码：
import {Line} from 'vue-chartjs'
let Firebase = require('firebase');
//
let config = {
apiKey: '****************************',
authDomain: '****************************',
databaseURL: '************
浏览 2提问于2017-08-30得票数 2
回答已采纳
1回答
vuex物理存储在哪里？
、、、
当我的vue应用程序处于生产状态时，我如何使用控制台或任何其他方法访问vuex数据？ 无法使用Vue Devtools，因为我正在进行生产
浏览 21提问于2019-04-17得票数 6
回答已采纳
3回答
在VueJS中还有点年轻，但我喜欢它的每一点。但现在，被固定在了某个地方。
我想使用通过props传递的值来初始化data()中的一些值。这是为了以后我可以改变它们，因为不推荐在组件中改变道具。实际上，推荐使用适当值初始化此属性，如下所示：
{
props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
}
我有一个类似下面的东西：
<template>
<div class="well">
<!-- U
浏览 0提问于2017-08-30得票数 7
下面的组件有一个名为objects的道具
<Table :objects="orders"/>
在mounted()中，我有一个axios.get()，它从直通式CMS中获取数据，如下所示。
this.orders = await this.axios.get('url')
.then(response => {
return response.data.data;
});
我的表组件中有一个错误，说明objects支柱是空的或未定义的，但是在Vue Devtools中它有一些对象。我试着在beforeCrea
浏览 14提问于2022-10-24得票数 0
我正在阅读这个，但是我的组件属性使用Vuex数据。
从示例中可以看出，如果country_id位于data方法中，则工作正常。但是，当country_id是从Vuex存储返回数据的计算属性时，子组件的internalValue总是被初始化为undefined。
我做错了什么？
父组件：
export default {
computed: {
country_id() {
return this.$store.state.user.country_id
}
},
mounted: function () {
浏览 1提问于2017-05-18得票数 9
我正在使用Vue.js和Chart.js绘制一些图表。每次调用函数generateChart()时，图表都不会自动更新。当我检查Vue Devtools中的数据时，它们是正确的，但是图表并不反映数据。但是，当我调整窗口大小时，图表确实会更新。
我在做什么？
每次打电话给generateChart()时，如何更新图表？
我觉得这将与object和array变更检测警告有关，但我不知道该怎么做。
<template>
<el-dialog title="Chart" v-model="showGeneratedChart"
浏览 40提问于2017-05-02得票数 33
回答已采纳
1回答
我正在构建一个vue2组件，其中包含一个vuex store对象。组件如下所示：
<template>
<ul id="display">
<li v-for="item in sourceData()">
{{item.id}}
</li>
</ul>
</template>
<script>
export default {
mounted: function () {
浏览 0提问于2018-03-05得票数 1
回答已采纳
我对Vue/VueX有点陌生，所以肯定有些东西我不明白。
我有一个非常简单的组件：
它从computed())In (在 mapState中)获取一个项目集合(目前在mounted()中)，我需要将该项推送到模板，但我无法计算出
据我所知，我们只能从setup或data方法将数据推送到模板，而不能从mounted、created挂钩等将数据推送到模板中。这听起来对吗？
在下面的示例代码中，如何将从item中的items获得的mounted()对象发送到模板？
我不能在setup中全部完成，因为computed() VueX items对象在那里还不可用。对于如何正确实现这个简单的目标，有什么建
浏览 0提问于2020-11-23得票数 1
回答已采纳
1回答
如何在vue.js中显示嵌套对象
、、、、
我返回的数据是一个带有嵌套对象的对象数组。我无法在模板中的v-for循环中显示“events”，因为我似乎无法访问返回数据的那一部分。
数据返回如下(从Vue DevTools)：
list: Object
user: "name"
id: "id"
events: Array[3]
0: Object
title: "event 1"
1: Object
title: "event 2"
2: Object
浏览 1提问于2016-01-31得票数 1
回答已采纳
在Laravel5.4环境中，我想在“.panel-heading of Example.vue”中呈现文本“示例”。执行npm run watch后，我得到以下Vue警告：
“'Property或method”消息不是在实例上定义的，而是在呈现过程中引用的。请确保在数据选项中声明反应性数据属性。
app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example', require('./components/Example.v
浏览 1提问于2017-05-02得票数 1
回答已采纳
我正在寻找一种方法，通过一些生命钩子(如mounted或updated )获取mounted值，并尝试用字符串保存该值。但我搞不懂。
虽然我尝试了使用:value对输入元素使用props值和一些字符串，并且能够得到它，但似乎没有v-model我就无法访问它，因为我研究了v-model和:value不能在一起。
其目的是获取value(带有道具和一些字符串)的input标记。
父组件
<invite :user_token="user_token"/>
子组件
export default {
props: ['user_token'],
浏览 2提问于2021-04-07得票数 0
2回答
我正在开发vue应用程序。我在这里面临的问题是，挂载的子组件在父子组件创建之前执行。
我正在将道具从父组件发送到子组件，我想使用子组件的挂载中的这些道具，但我不会让这些道具挂载，因为它们是在父组件中创建之前执行的。请帮我解决这个问题，以致子组件将this.userCopy设置为this.user，这是一个道具。
父组件
<template>
<div>
<Info :user="user" />
</div>
</template>
<script>
import Info from 'v
浏览 0提问于2021-04-08得票数 1
我在nuxt组件中使用chartjs。问题是，我得到了引用错误，chartLabels和chartDataPoints没有定义。如果我将chartLabels和chartDataPoints替换为this.$store.state.chartLabels和this.$store.state.chartDataPoints，我的图表将被呈现，但随后，它不再是反应性的，因为我需要使用computed来处理它。
存储已正确设置，并且我在vue devtools中获取了正确的数据，因此存储似乎不是问题所在。
我做错了什么？
<canvas id="daily-chart">
浏览 8提问于2021-07-01得票数 0
1回答
执行此代码时，将输出“未定义”。
子组件
export default {
porps: [
'idx'
],
mounted () {
console.log(this.idx)
},
} //BambooPage.vue
父组件
<template>
<div class="bamboo">
<bamboo-page v-bind:idx="index" v-if="show"></bamboo-page>
</div&g
浏览 2提问于2020-02-25得票数 0
回答已采纳
我在博客后端的一个部分(而不是SPA)上使用VueJS 2.5.3进行API调用，以检查附在文章上的特征图像。
如果找到一个，则使用子组件来显示图像。问题是，在API调用成功之后，子组件没有呈现，因此传递给它的图像对象也没有。
，子组件没有呈现<!---->，我在上面有一个v-if来检查图像是否存在。但是，如果我单击Vue DevTools中的子组件，则子组件按预期呈现和显示图像。
我的问题是，为什么子组件只在Vue Devtools中单击它之后才会呈现？当您单击组件时，Vue Devtools会触发某种事件吗？
以下是子组件：
<template>
<d
浏览 2提问于2017-11-06得票数 7
回答已采纳
1回答
我有一个相当简单的Vue组件(去掉了不必要的部分)： Vue.component('equipment-tree', {
data(){
return {
tree: [],
}
},
template: `
<template>
<div id="equipment_tree"></div>
</template>`,
mounted: function(){
this.getTreeView()
conso
浏览 64提问于2021-09-26得票数 2
回答已采纳
我的模块中名为ShopItemCategory的Getter
getters: {
shopItemsCategories: state => state.ShopItemsCategories.data,
},
这是我在组件内部计算的函数
computed: {
shopItemsCategories() {
return this.$store.getters['ShopItemCategory/shopItemsCategories'].filter(c => c.shop_id == this.$rou
浏览 2提问于2020-05-11得票数 0
回答已采纳
1回答
如何使用vue js显示谷歌地图？我给出了下面的代码。它给出了映射是未定义的，但我已经安装了该google的所有依赖项。
<div id="map"></div>
下面是我的剧本
import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'
export default {
data: function() {
return {}
},
mounted() {
let myLatlng = new window
浏览 1提问于2019-09-02得票数 0
我检查了并确认它确实以演示的方式工作。但是我需要使用HTML中的组件，而不是webpack编辑的modal.vue模板.所以我写了如下：
<body>
<div id="app">
<modal name="test">
test
</modal>
</div>
<script src="{% static 'js/tmpdev.bundle.js'
浏览 7提问于2022-03-23得票数 0
3回答
我试图检索一个全局会话值，并将其设置为vue变量。问题是，id变量没有在控制台上显示任何值，而是在vue组件上显示值。我已经检查了vue devtools，并且id确实包含正确的值。
Vue组件
<template>
<div class="container">
<h1>{{id}}</h1> // the id does displays the value
</div>
</template>
<script>
export default {
data () {
浏览 1提问于2019-03-25得票数 0
1回答
我想知道，对于Vue类中的属性和方法，应该使用哪些修饰符？(我使用vue-class-component包)。public，private，protected？
还是应该关闭linter规则，该规则规定我需要设置一个访问修饰符？
下面是一个示例组件：
@Component({
components: { MyChildComponent }
})
export default class MyComponent extends Vue {
// props
@Prop({ type: String, default: '' }) public readonly va
浏览 0提问于2019-03-25得票数 8
回答已采纳
我试图使用billboard.js作为d3.js的简单替代品来显示一些线条图。不幸的是，我似乎无法使它在我自己的存储库中工作，也无法使它在一个普通的Vue项目中工作。
有谁能告诉我，要让billboard.js 与Vue?一起运行，是否需要特殊的东西？
我的App.vue：
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<div id="chart">
</d
浏览 4提问于2020-08-17得票数 2
回答已采纳
1回答
手动侦听Vue实例中的鼠标事件
、、、、
我试图从组件中侦听子组件中的鼠标事件，但没有触发该事件。当我在html中侦听事件时，它是有效的，但不起作用。
正如您所看到的那样，这样做是可行的：
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#mouse',
data: {
message: 'Hover Me!'
},
methods: {
mouseover: function() {
this.message = 'Good!'
浏览 0提问于2018-12-30得票数 1
回答已采纳
我正在将VueJs组件添加到我的Laravel应用程序中，我正在努力解决这个问题：
我有两个模型，让步和品牌，与这样的ManyToMany关系：
特许权模型
public function brands()
{
return $this->belongsToMany('App\Brand');
}
品牌模型
public function concessions()
{
return $this->belongsToMany('App\Concession');
}
在控制器im中，从所有特许权中获取数据，然后
浏览 4提问于2020-09-10得票数 0
对于Vue.js程序员来说，这是一种生活方式的改变，但最终还是会实现的。在这里，我按照规范使用vuefire，甚至从我的一个记录，一个字段Firebase DB中手动插入正确的键来测试它。但看不到任何返回或显示的内容。
我很想知道该怎么做！并填写我的一张价值表格。我敢肯定，从那里开始，天空就是极限。谢谢你的帮助。
错误消息: vue.common.js?e881:481 Vue warn:装入钩子时出错：“未定义ReferenceError: residentsArray”
<template>
<div class="edit">
浏览 16提问于2017-07-28得票数 1
回答已采纳
3回答
我有一个maps组件，它初始化谷歌地图，根据从父服务器传递的道具向地图添加标记，然后设置映射的正确界限。但是，这些标记是通过计算属性添加的，因为我希望它是反应性的。实际上，所有操作都很好，除了我计算的属性中的addMarkers函数在加载页面和组件时似乎没有计算。
现在奇怪的是:当我打开Vue Devtools并单击maps组件时，addMarkers立即正确地计算和更改映射。
任何高度赞赏的帮助：)
<template lang="pug" >
div.google-map(id="results-map")
</template>
浏览 0提问于2018-03-12得票数 1
回答已采纳
在我的父组件中： <UsersList :current-room="current_room" /> 在子组件中： export default {
props: {
currentRoom: Object
},
data () {
return {
users: []
}
},
mounted () {
this.$nextTick( async () => {
console.log(this.curr
浏览 35提问于2019-10-10得票数 1
1回答
我正面临以下问题。
我有一个纯web组件：
<my-web-comp options='["op1", "op2"]' active-option="op2"></my-web-comp>
这将呈现为两个选项卡，默认情况下选择第二个选项卡。单击另一个属性时，active-option的HTML属性将更改为op1，如果打开DevTools，实际上会看到DOM中的属性正在发生变化。
但是，我无法在使用web组件的Vue组件中检测到更改。我有：
<template>
<div>
浏览 4提问于2020-10-07得票数 0
2回答
我应该如何引用vue图表实例中的图表并销毁它？我试过：
var chartVue = new Vue({
el: '#chart',
extends: VueChartJs.Line,
data: {
chartData: {...},
options: {...}
},
mounted() {
this.renderMyChart()
},
methods: {
renderMyChart: function() {
this.renderChart(
this.chartData,
浏览 1提问于2017-10-25得票数 2
回答已采纳
我正在尝试用laravel + vue制作购物车，这里的主要问题是vue的一部分。
在我的购物车组件中，您可以通过简单的点击添加/删除产品，如果产品被添加到购物车，我想应用一个css到产品卡。
我为此创建了一个计算属性，并向产品卡片节点添加了一个类绑定，但我得到了以下错误：
[Vue warn]: Error in render: "TypeError: _vm.isAlreadyAdded is not a function"
found in
---> <PRODUCTlchoice1> at resources/js/components/produ
浏览 0提问于2019-03-05得票数 1
我正在建立一个新的网站，我想发送数据从拉拉维尔刀片模板到Vue.js前端。
我尝试将php属性传递到我可以从vue访问的html proprerty中，这对简单的字符串是有效的。
<div id="paragraphs" originaldata="{!! $band->paragraphs !!}">
...
mounted: function() {
this.paragraphs = this.$el.attributes.originaldata.value.split('//')
this.paragr
浏览 1提问于2019-01-01得票数 1
回答已采纳
2回答
我的Vue.js应用程序中有以下情况：
data() {
return {
data: []
}
},
async created() {
console.log('before async call')
try {
// async call ...
console.log('after async call')
this.data = // data from api call
} catch (err) {
// handle err
}
},
mounte
浏览 6提问于2021-01-16得票数 2
回答已采纳
我的App.vue文件：
<template>
<v-app app color="grey">
<Navbar v-if="isLoggedIn"></Navbar>
<v-content class="mx-4 mb-4">
<router-view></router-view>
</v-content>
</v-app>
</template>
<script>
i
浏览 1提问于2020-04-18得票数 1
回答已采纳
我的目录结构有点像这样
pages/
└── _id/
├── index.vue
└── edit.vue
现在，我想访问我在edit.vue中的文件夹的路由，但它显示为route is not defined或$route is not defined。在我的created()中，我对一个变量使用route.params.id或$route.params.id。但我不认为它能起作用。我该怎么做呢？
浏览 26提问于2018-06-29得票数 1
我使用Laravel作为api，在视图中传递了对象(order)的集合(orders)。我不知道为什么我不能在vue.js的简单方法中访问我的变量。 props: ['orders'],
mounted() {
console.log('Component mounted.');
},
data() {
return {
select: [],
selected: 'csv',
options: [
浏览 61提问于2019-06-03得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
