在vue中渲染数据之前，如何等待创建的变量更改？
在Vue中渲染数据之前，可以通过使用Vue提供的生命周期钩子函数和数据绑定机制来等待创建的变量的改变。
- 使用生命周期钩子函数：Vue提供了一系列的生命周期钩子函数，可以在不同的阶段执行相应的操作。可以通过在钩子函数中监听变量的变化，然后在数据变化后执行相应的渲染操作。
- 例如，可以在
created或mounted钩子函数中监听变量的变化，当变量改变时触发相应的操作。具体步骤如下：- 在Vue组件中定义变量，例如
data属性中的某个变量myVariable。 - 在
created或mounted钩子函数中监听myVariable的变化，可以使用watch属性来实现。示例代码如下： - 在
created或mounted钩子函数中监听myVariable的变化，可以使用watch属性来实现。示例代码如下：
- 在Vue组件中定义变量，例如
- 使用数据绑定机制：Vue提供了数据绑定的功能，可以将变量和DOM元素进行绑定，当数据发生变化时，自动更新相关的DOM元素。可以使用Vue的指令
v-if或v-show来实现等待变量改变后再进行渲染。 - 例如，可以使用
v-if指令来判断变量是否为null，如果为null则不渲染相关的DOM元素，当变量改变后，DOM元素会根据变量的新值进行渲染。示例代码如下： - 例如，可以使用
v-if指令来判断变量是否为null，如果为null则不渲染相关的DOM元素，当变量改变后，DOM元素会根据变量的新值进行渲染。示例代码如下： - 当
myVariable的值为null时，相关的DOM元素不会被渲染，直到myVariable的值改变后，相关的DOM元素会被渲染。
请注意，以上方法是基于Vue框架的解决方案，如果您的需求是在纯JavaScript中实现等待变量改变后再渲染，可以使用回调函数或Promise来实现。具体实现方式可以根据具体情况进行调整。
相关·内容
在Vue.js中，当某些数据发生更改时，组件确实会重新呈现(更新)。有时重新渲染的频率太高了，我想找出哪些数据的更改导致了这种重新渲染。如何找出导致重新渲染的更改数据？
浏览 2提问于2018-05-29得票数 7
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
回答已采纳
1回答
如何在vue中渲染smarty？我想在我的应用程序中的所有东西上创建vue实例，并将其与smarty连接。我想为前端数据使用vue，为后端数据使用smarty。当我生成类似于示例中的代码时，它会出现，而当vue render消失时 <div id="vue-app">
<div>{$smartyVariable}</div>
<div>
浏览 51提问于2019-05-22得票数 0
我试着在vue设置中渲染三个js画布。但是，由于vue的状态管理模式，只有在vue状态管理之外设置与画布相关的变量时，才能这样做。
我看到了一个在vue状态环境中实现这一目标的例子，但在本例中，DOM元素必须在vue中创建，而不是在html/template中创建。
是否可以在vue中创建三个画布而不使用vue之外的变量(意思是使用let场景，而不是this.scene)?
或
使用vue状态管理，但不使用
document.body.appendChild(this.renderer.domElement);
而不是使用
this.renderer=new THREE.WebGLRender
浏览 4提问于2021-05-27得票数 0
1回答
在我的vue3项目中，我使用了vue3-style- components，但是当我在由vue3-style-component创建的组件中添加类时，它会呈现重复的类。如下所示： ? 如何防止重复的类渲染？ 这是我的vuejs代码： ? 这是Style-components Code： ?
浏览 69提问于2021-05-03得票数 3
1回答
我刚接触vue，正在尝试将一个老式的boostrap应用程序移植到BS5 + vue3模式。我正在尝试重新创建这个:基于从应用程序接口中提取的json对象的https://www.screencast.com/t/ZfnE60z4cR8。目前它是4个嵌套的对象数组(用于保留排序的数组)，但如果这不是最优的，我可以更改为任何我需要的结构。简而言之，设施包含空间包含包含数据点(温度、湿度等)的设备。有警报和其他条件，但目前我只是想弄清楚如何渲染基本结构。我有一种预感，组件是最有意义的，我得到了要渲染的工具，但是我如何在这些容器中渲染空间，然后是设备和它们的每个相关数据点(我假设是相同的组件传递了
浏览 17提问于2020-09-21得票数 0
回答已采纳
我是JavaScript的新手，我试图为我用Python创建的部分网站添加一些现代的交互性。Vue在我看来很吸引人，我想使用而不使用节点/webpack等，这是我不熟悉的。
Vue网站对如何通过<script src=... >导入框架本身有相当全面的描述，但是我也想使用Vue2leaflet包。
我尝试用<script src=... >将其添加到网页中，然后在脚本中注册组件
Vue.component('l-map', Vue2Leaflet.LMap);
Vue.component('l-tile-layer', Vue2Leafl
浏览 4提问于2020-08-25得票数 0
我有以下简单的v-for循环： <div class="HolderRow" v-for="(row, index) in 9" :key="index">
<Holder v-for="(row, index) in 11" :key="index" :holder1="increment()" />
</div> 在每次渲染" Holder“时，我希望将计数器递增1，并将其作为道具传递给Holder。递增方法和递增数据如下： export de
浏览 60提问于2020-04-04得票数 2
回答已采纳
1回答
在NativeScript-Vue/Firebase中，我有一个方法，它承诺从当前用户的关联Firestore文档中获取一个文档uids数组。uids对应于与其他用户(当前用户正在关注的用户，也称为他们的“圈”)相关联的文档。 Firestore数据如下所示： ? 使用vue-devtools，它在页面的数据中显示circleList由正确的数据数组填充。问题是，它永远不会在Listview中呈现，isLoading也永远不会更改为false。我的假设是，组件在加载数据之前正在尝试呈现。我尝试过使用async/await方法来解决这个问题，但是它使得Vuex的userProfile信息永
浏览 14提问于2020-09-03得票数 2
回答已采纳
我有这个：
Login.vue具有子FormGroup.vue
FormGroup.vue有两个孩子- Input.vue和Label.vue
我在Login.vue中有data()，如何对FormGroup.vue中的Input.vue中的数据进行v建模？
浏览 2提问于2021-06-11得票数 0
1回答
我有一个用@vue3/cli项目创建的非常简单的项目。我的问题很简单，但我找不到一个简单的或任何解决方案。
我有两个组件。一个组件在视频标签中具有网络摄像头视频渲染，而另一个组件具有html5画布。我想在另一个组件的画布上渲染视频的一部分。我不知道如何将视频图像从一个组件发送到另一个组件。
这两个组件都注册在同一层次结构的同一视图下。
Home -->
WebCam.vue
Canvas.vue
现在我已经尝试将视频作为数据从WebCam组件发送到Canvas组件，使用-
this.emitter.emit('cam-image', {
浏览 4提问于2021-05-31得票数 0
我试着找一些关于它的文章，但是什么也找不到。
我使用vue路由器并通过axios在创建的钩子中加载数据。问题是，我不想在用户每次访问下一个路由并返回时都调用创建的钩子。因此，当用户单击“上一步”时，当前创建的钩子运行，该钩子从数据库重新加载数据。我想要的是阻止重新渲染数据，并使用已经加载的以前的组件。
谢谢。
浏览 1提问于2018-02-08得票数 0
我使用EventBus将UserId传递给另一个组件(UpdateStaff)。然后，我想在url/api/staffs/{UserId}上调用一个API，以获取特定用户的数据，并将数据绑定到输入字段。我能够获得响应有效负载，但无法绑定到输入字段。
UpdateStaff.vue:
模板中输入字段的示例：
<input class="input" type="text" placeholder="Username" v-model="data.username">
数据属性和创建的方法：
data () {
ret
浏览 5提问于2017-07-20得票数 1
回答已采纳
你能解释一下为什么中的孩子在每次点击“测试”按钮时都会被重新渲染吗？它不使用在click handler中创建的新字段。如何修复它？
子组件的源：
<template>
<span>
<slot class="hello" v-bind="fields.test"></slot>
</span>
</template>
<script>
export default {
inject: ["fields"],
updated() {
浏览 4提问于2020-03-08得票数 0
2回答
将socket.io数据传递给vuejs元素有问题。我看了几遍Vue文档，但找不到解决方案。基本上，我有一个通过socket.io和console.log发送给客户端的数据，并完美地打印出来。现在，我想使用Vue来呈现那些数据的html元素，但是我在将我的socket.io数据传递给它时遇到了问题。
在Vue文档中，有一个使用静态数据输入的示例。
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message
浏览 8提问于2017-04-05得票数 2
回答已采纳
我想将Vue与预渲染的HTML一起使用。从长远来看，我们可能不会，但就目前而言，让服务器代码留在原地，并使用Vue来管理web应用的客户端逻辑似乎更容易。
我似乎找不到任何描述如何让视图模型从HTML加载其数据的内容。我的示例将与相同。尽管这个问题已经解决了(并修复了？)，但我似乎不能让它在1.x或2.x中工作。
当我设置一些HTML时
<div id="myvue">
<span v-text="message">Hello!</span>
</div>
然后为它创建一个视图模型
var vm = new
浏览 2提问于2017-02-08得票数 4
1回答
在我的Vue 3项目中，我在一个组件中有这个按钮：
<template>
<button type="button" class="btn btn-success" :data-id="product.id"
v-on:click="hideButtonAndScroll(product.id)">Get Offer</button>
<!-- ... some code here ... -->
<offer-form :product="pr
浏览 8提问于2021-02-16得票数 1
我正在尝试获取ag-grid行数据，以便在模式窗口中进行编辑。在渲染过程中，vue通过下面的错误。
Vue warn:装入钩子时出错："TypeError:无法读取未定义的属性'data‘“
我的代码。这是挂载的方法。
mounted() {
this.leadsData = JSON.parse(JSON.stringify(this.params.data))
},
浏览 2提问于2020-04-29得票数 0
1回答
我正在使用Sockets从远程服务器接收数据。
我正在使用下面的app Vue组件：
let app = {
name: 'app',
data: {
dataStore: {}
},
mounted () {
var vm = this;
socket.on('data-receive', (data) => { //data = {user: 'myUser' value: 45}
vm.dataStore[data.user] = data.value // also tried Vue.set(vm.dat
浏览 0提问于2016-12-16得票数 1
我将1000+条目的日志下载为JSON。每个条目都是一个多级对象。我解析JSON，对数组进行排序并对其进行过滤。我将它划分为3个不同的“计算”函数，以避免过多的解析或排序。每个“计算”函数充当管道，从前一个函数中获取数据，如下所示：
<div v-for="i in cArraySortedFiltered"
:key="i.id">...</div>
computed: {
cArray() {
return parse(json);
},
cArraySorted() {
return cAr
浏览 5提问于2018-02-01得票数 0
1回答
我有一个2000输入复选框的列表。当同时选择它们时，明显的延迟(和浏览器冻结)大约是2秒。这似乎是Vue和React的情况，但对于Svelte、jQuery或香草则不然。
有了5k+复选框，它就变成了一个非常恼人的3-5秒的阻止程序.
为什么重渲染要花这么长时间？
如何用Vue.js克服更新延迟？
(分页或延迟加载的解决方案并不能真正解决问题，而是在回避问题。)
下面是Vue中的代码，后面是Svelte中的相同示例。
<script setup>
import { ref } from 'vue'
const items = ref(Array.from({leng
浏览 4提问于2022-04-15得票数 6
回答已采纳
我使用Vue.observable()来管理状态，并且在vue-router加载大多数视图之前，需要等待两个存储属性被填充。 我尝试将加载放在beforeCreate中，在App.vue中创建并挂载生命周期事件，因为它是我的web应用的根： <template lang='pug'>
#app
AppHeader
router-view
AppFooter
</template>
<script lang="ts">
import { Component, Vue } from 'vue-propert
浏览 18提问于2019-05-14得票数 0
我正在尝试将base64数据绑定到img属性的src。在将新值设置为img vue属性之前，代码运行良好 我建立了这个 new Vue({
el: '#app',
data: {
img: ''
},
methods: {
upload: function( event ){
let file = event.target.files[0];
if( !file ) {
return;
} else {
let imageType = /image.*/;
if ( !file.type.m
浏览 35提问于2019-05-24得票数 0
回答已采纳
如何在Vue js中从外部javascript触发'methode‘内的函数？ 我想在vue js中从index.html触发方法内部的调用()。 有人能帮我解决这个问题吗？
浏览 18提问于2020-04-23得票数 0
请参阅此最小示例 1 这个最小模板不会抛出任何错误，因为父模板没有渲染任何内容。 <template>
<div v-if="false">
{{ i.dont.have.the.value }}
</div>
</template> 2 现在，如果我使用默认插槽创建一个模态包装器，并且仍然使用v-if Modal.vue <template>
<div v-if="show">
<slot />
</div>
</templa
浏览 9提问于2020-08-12得票数 0
回答已采纳
我正在App.vue的App.vue钩子组件中对我的商店进行调度调用，然后在子组件中使用getter请求，问题似乎是，在加载应用程序时，在数据被放在存储区之前加载了子组件，并且没有显示。我对此很有信心，因为我记录了控制台，第一个日志是子组件，它是商店的使用者。如何保证在加载任何其他组件之前，需要在站点范围内运行dispatch？
// App.vue
created() {
this.$store.dispatch(this.$mts.diseases.DISEASES_LIST) //note I tried with async/await to no avail
浏览 0提问于2019-07-18得票数 4
这是我的vue实例：
var vue = new Vue({
el: '#vue-wrapper',
data: {
items: [],
}})
这是我的index.html.eex中的一个v-for循环
<div v-for="item in items[0].subItems">{{item.name}}</div>
这是我填充项目的脚本，在文档就绪时，使用从Phoenix服务器渲染时传递的数据。
<script type="text/javascript">
jQuery(d
浏览 0提问于2018-02-16得票数 5
回答已采纳
1回答
我正在努力学习在vue中实现api和过滤数据，但我不能让它工作。
这是我创建的代码沙箱：
我可以打印数据，但不能过滤它们，即使我使用的是函数。
如果有人能引导我走上正确的道路，我将不胜感激。
浏览 9提问于2021-02-25得票数 0
我有(我的第一个) vue应用程序，它从api获取数据并呈现一些选择元素。我想把每个盒子分成另一个文件(一个文件用于从api获取数据，第二个文件用于渲染选择，第三个文件用于渲染列表)。如何将数据从
我尝试从api实例中获取数据：
export default {
props: {
filters: apiIntance.$data.kpis.filters,
此时此刻，我有这样的想法：
<!-- src/components/Filters.vue -->
<template>
<div class="filters
浏览 2提问于2019-08-19得票数 0
我正在使用Vue.JS编写Markdown编辑器，我尝试使用localStorage与它一起保存数据，但我不知道在用户输入时如何将新值保存到Vue.JS中的数据变量中！
浏览 9提问于2017-01-02得票数 59
回答已采纳
2回答
Vue 2，我试图从输入中渲染文本，并在按下按钮时添加而不是覆盖新数字。不知道如何从这里传入数据。
let mutations = {
changeNumber(state, number) {
state.count = state.count + number
}
}
const store = new Vuex.Store ({
mutations,
state: {
number: ""
}})
Vue.component('some-component', {
template:
`<div>
<input
valu
浏览 0提问于2021-01-16得票数 1
如果我动态创建一个Vue组件(使用Vue.extend并调用构造函数)，它就不知道Vue主题。如何将Vuetify注入到动态创建的新组件中？
浏览 10提问于2020-05-02得票数 0
我已经学习了Vue.js的生命周期钩子，但是没有发现任何使用created()函数的实际场景？
我知道created()函数可以访问响应式数据和事件，但不能访问DOM元素。但实际上我不知道如何使用它。请谁帮我提供使用Created()函数的实际场景。提前谢谢。
浏览 2提问于2018-10-15得票数 7
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
回答已采纳
我正在尝试创建一个自动下拉列表，以获得一个类别列表。我用autocomplete来创建它。
我所犯的错误是
Vue警告:挂载钩子中的错误："TypeError:无法读取未定义属性的‘长度’“
和
TypeError:无法读取未定义属性的“长度”
我不知道如何修复它，即使我的类别正在加载，当我输入自动完成时，我可以得到我的类别列表，但是我在我的控制台中得到了上面的错误，所以我不知道我将如何得到这些错误。
这是我的密码
我的products.js
Vue.component('product-app', require('./ProductApp.vue
浏览 1提问于2020-09-02得票数 0
我试图以编程的方式创建一个Vue组件实例，但我遇到了一些问题。
<!DOCTYPE html>
<html>
<head>
<script src="http://vuejs.org/js/vue.js"></script>
<meta charset="utf-8">
</head>
<body>
<script>
var vm = new Vue({
data:{
me
浏览 0提问于2019-08-27得票数 3
我使用vue.js来管理用户，并使用这段代码来初始化vue：
const app = new Vue({
el: '#dashboard',
i18n: i18n,
data:{ store },
router: router,
created()
{
this.store.user.actions.getUser();
}
});
在store中，我有：
const store =
{
user:
{
state:
{
user: null
},
actio
浏览 35提问于2021-06-05得票数 0
回答已采纳
1回答
计算/异步数据获取
、、、、
我正在尝试创建简单的Vue + CouchDB应用程序。使用Vanilla，这很好，但我没有将数据从数据库中获取，其中包含一个承诺或异步函数，用于我的vue实例。这是我的代码：
app.html
<div id="vue-app">
<table>
<thead>
<tr>
<th>{{ tableHead.name }}</th>
<th>{{ tableHead.lastname }}</th>
</tr&
浏览 0提问于2018-07-16得票数 2
你对Vue 3(或composition api)中的模板渲染有什么看法，特别是它的速度和轻量级？ 我们用一些简单的组件(比如ui-box，ui-button等)创建了一个站点构造器。在Vue 2中，对于大多数组件，我们使用函数组件通过h()函数进行渲染，以使它们的渲染更快、更轻，因为我们希望场景中有很多这样的组件。据我所知，在Vue 3中，模板渲染速度更快，性能更好。 你对此有什么看法？当Vue 3到来时，我们应该仍然使用h()，还是可以使用通常的模板渲染？
浏览 100提问于2019-12-08得票数 4
回答已采纳
1回答
我在尝试从子组件A ($emit)传递数据到父组件以及从父组件传递到子组件B (props)时卡住了。
使用nuxt.js我有：
布局/default.vue
此默认模板将加载大量组件。这些组件的使用与否取决于子变量，该变量将设置v-if指令。
子页面如下所示：
pages/blog/index.vue pages/about/index.vue ...
目标是在父代上设置什么组件将被使用，标志可以随时改变，用户可以选择什么将被渲染在管理区域上。
我尝试过对子组件和vuex使用本地计算方法，但两者都没有成功。
布局/default.vue的想法。
<template>
&l
浏览 2提问于2019-07-23得票数 3
这是我的main.js
import Vue from 'vue';
import Framework7 from 'framework7/dist/js/framework7.js';
import Framework7Vue from 'framework7-vue/dist/framework7-vue.js';
import Routes from './routes.js';
import App from './app.vue';
import * as firebase from 'fireb
浏览 9提问于2018-08-22得票数 1
1回答
我使用axios来获取我的JSON文件en，用于在多个组件上使用获取的数据。问题是，在加载所有数据之前，我的页面将呈现。以下操作是因为我将呈现延迟了2秒，如果没有这个超时，就会导致错误。我想用正确的方法来做这件事，但我不知道该如何做。
STORE.JS
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
poss: null
},
getters: {
NAME: state => {
return state.name
},
浏览 1提问于2019-09-26得票数 1
我在index.vue中有一个Vue复合渲染
在index.vue中，我们有一些数据
data(){
return {
splashIsActive: true,
tutorialIsActive: false,
gameIsActive: false
}
}
以及index.vue 中的组件。
<SplashBox v-if="splashIsActive"/>
然后，如果我们去splashBox有一个按钮。
<button @click="debug">....
是否
浏览 12提问于2022-07-28得票数 0
我的目标是构建一个测试套件来可视化React、preact、Inferno、Snabbdom、Vue中内部超脚本方法createElement() (也称为h())的实现差异。 在React中，我可以像这样调用它(不需要构建组件)： ReactDOM.render(
React.createElement('div', { className: 'preview' }, ['Hello World']),
document.getElementById('react-preview')
) 在Preact中，我们简单地执
浏览 30提问于2019-02-01得票数 1
回答已采纳
如何在Nuxt中加载特定页面的外部文件？
我遵循了这个指南：，如果我加载带有服务器端渲染的页面(即直接访问URL )，它就会工作。
但是，如果我使用链接(从vue路由器)转到页面，则脚本将不存在。
浏览 0提问于2020-02-17得票数 0
1回答
我正在尝试创建一个非常基本的VueRouter示例，这样我就可以理解事情是如何更好地工作的。
我有以下例子：
import Vue from 'vue';
import VueRouter from 'vue-router';
window.Vue = Vue;
Vue.use(VueRouter);
import Message from './components/Message.vue';
new Vue({
el: '#app',
routes: new VueRouter({
浏览 4提问于2017-06-22得票数 3
回答已采纳
我有一个从本地机器加载Vue JS 2的电子应用程序，然而，无论我附加我的el来完全清空元素并用Vue JS注释替换内容，我错过了什么？ index.html <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<meta http-equiv="Content-Security-Policy" content="script-src &#
浏览 17提问于2021-04-29得票数 1
我正在使用prerender-spa-plugin，它工作得很好！我很好奇vue是如何检测到预渲染的。为什么它不像往常一样渲染它的组件呢？
我试着寻找答案，但没有人讨论vue是如何做到这一点的。
浏览 1提问于2017-11-07得票数 6
我不清楚从OpenGL规范到，是使用glGetSynciv还是glClientWaitSync，以防我想不等待就检查同步对象的信令。以下两个命令在行为和性能方面如何比较：
GLint syncStatus;
glGetSynciv(*sync, GL_SYNC_STATUS, sizeof(GLint), NULL, &syncStatus);
bool finished = syncStatus == GL_SIGNALED;
vs
bool finished = glClientWaitSync(*sync, 0 /*flags*/, 0 /*timeout*/) == ALREA
浏览 3提问于2016-01-04得票数 11
1回答
我使用vue-cli 3为npm创建一个lib。除了在JavaScript中包含css时，库不能像Nuxt那样在服务器端渲染之外，一切看起来都没问题。它一直在说文档不是有合理理由定义的。 因此，我的问题是如何使用嵌入式CSS为SSR做好准备？ 我目前使用的是 vue-cli-service build --target lib --name myLibName *.js 还有我的vue配置文件 module.exports = {
css: {
extract: false,
},
configureWebpack: {
output:
浏览 21提问于2019-02-01得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
