vue-reactivity

Empty Vue 3 reactive object on some pages

由 浪子不回头ぞ 提交于 2021-02-11 04:31:21
问题 I have an object that I want to access from all my web app pages. I am using Vue 3 reactivity but I have noted that in some instances, I have to refresh the page to get the object. How do I refactor my code to have the object always? See my code below: import { reactive, watch } from "vue"; import getSchoolDocuments from "../composables/getSchoolDocuments"; import { projectAuth } from "../firebase/config"; let user = projectAuth.currentUser; let userId; if (!user) { userId = localStorage

Computed property not updating on props changes

由 ￣綄美尐妖づ 提交于 2021-02-10 15:39:15
问题 I can't get a computed property to update, when a nested property in a passed prop object is changed. this.favourite is passed via props, but the computed property is not updating when this.favourite.selectedChoices.second.id and this.favourite.selectedChoices.first.id is changed. Any ideas of how to make this reactive? Here's the computed property: isDisabled() { const hasMultipleChoices = this.favourite.choices.length ? this.favourite.choices[0].value.some(value => value.choices.length) :

Difference between computed property and normal data in Vue.js

由 时光总嘲笑我的痴心妄想 提交于 2020-01-04 22:45:12
问题 I observed that when a normal property that came from data() and a computed property that is derived from it are passed through an event, the former keeps its reactivity while the latter loses it. I set up the following test case for it (also as a JSFiddle if you prefer that): const EventBus = new Vue(); Vue.component('comp', { data() { return { arrData: ['a', 'b'] }; }, computed: { arrComputed() { return this.arrData.map((e) => e.toUpperCase()); } }, template: ` <div> <div>Original array: {{

How do I push items into an array in the data object in Vuejs? Vue seems not to be watching the .push() method

由 女生的网名这么多〃 提交于 2020-01-02 04:57:09
问题 I am attempting to add objects into an array I declared in Vue instance data object. I can set the values in the state's purchase object, but when I push data into the orders queue array, the empty array is not populated. The function is being triggered, but the array does not update. Here is my form: <form v-on:submit.prevent="queuePurchase" class="form-inline row" id="order-creation-form" method="POST" > @csrf <autocomplete-field sizing="col-xs-12 col-sm-3 col-md-3" name="customer" label=

Vue.js computed property loses its reactivity when passed through an event

由 怎甘沉沦 提交于 2019-12-12 16:07:25
问题 I have a Modal component in my main app that gets passed content via an event whenever a modal has to be shown. Modal content is always a list with an action associated with each item, like "select" or "remove": Vue.component('modal', { data() { return { shown: false, items: [], callback: ()=>{} } }, mounted() { EventBus.$on('showModal', this.show); }, template: `<ul v-if="shown"> <li v-for="item in items"> {{ item }} <button @click="callback(item)">Remove</button> </li> </ul>`, methods: {

How do I push items into an array in the data object in Vuejs? Vue seems not to be watching the .push() method

由 我的未来我决定 提交于 2019-12-05 11:06:22
I am attempting to add objects into an array I declared in Vue instance data object. I can set the values in the state's purchase object, but when I push data into the orders queue array, the empty array is not populated. The function is being triggered, but the array does not update. Here is my form: <form v-on:submit.prevent="queuePurchase" class="form-inline row" id="order-creation-form" method="POST" > @csrf <autocomplete-field sizing="col-xs-12 col-sm-3 col-md-3" name="customer" label="Customer" :data="{{ json_encode($customers) }}" v-on:setcustomer="setCustomer($event)" ></autocomplete
订阅 vue-reactivity