score:48
note: at the bottom of this answer, see the general point i make about update/reactivity issues with vue.
now, about the question, based on the code you posted, considering the template:
<div v-for="video in videos" :key="video.id">
it picks the videos
from:
data () {
return {
videos: freevideo
}
}
although it initializes from freevideo
, in nowhere in your code you show an update of videos
.
solution:
you already have the state mapped in the getfreevideo
computed:
computed: {
...mapstate(['getfreevideo'])
}
use it:
<div v-for="video in getfreevideo" :key="video.id">
update:
i'm setting
videos
in data() to getfreevideo in the store within the created() lifecycle:this.videos = this.getfreevideo
this is not enough to keep this.videos
updated with whatever this.getfreevideo
is. whenever something is set to this.getfreevideo
it will only change this.getfreevideo
, not this.videos
.
if you want to automatically update this.videos
whenever this.getfreevideo
changes, create a watcher:
watch: {
getfreevideo() {
this.videos = this.getfreevideo
}
}
and then keep using videos
in the v-for
:
<div v-for="video in videos" :key="video.id">
vue's reactivity
if your state is not getting updated in the view, perhaps you are not exploring vue at its best:
to have vue automatically react to value changes, the objects must be initially declared in
data
. or, if not, they must be added usingvue.set()
.
see the comments in the demo below. or open the same demo in a jsfiddle here.
new vue({
el: '#app',
data: {
person: {
name: 'edson'
}
},
methods: {
changename() {
// because name is declared in data, whenever it
// changes, vue automatically updates
this.person.name = 'arantes';
},
changenickname() {
// because nickname is not declared in data, when it
// changes, vue will not automatically update
this.person.nickname = 'pele';
// although if anything else updates, this change will be seen
},
changenicknameproperly() {
// when some property is not initially declared in data, the correct way
// to add it is using vue.set or this.$set
vue.set(this.person, 'address', '123th avenue.');
// subsequent changes can be done directly now and it will auto update
this.person.address = '345th avenue.';
}
}
})
/* css just for the demo, it is not necessary at all! */
span:nth-of-type(1),button:nth-of-type(1) { color: blue; }
span:nth-of-type(2),button:nth-of-type(2) { color: red; }
span:nth-of-type(3),button:nth-of-type(3) { color: green; }
span { font-family: monospace }
<script src="https://unpkg.com/vue"></script>
<div id="app">
<span>person.name: {{ person.name }}</span><br>
<span>person.nickname: {{ person.nickname }}</span><br>
<span>person.address: {{ person.address }}</span><br>
<br>
<button @click="changename">this.person.name = 'arantes'; (will auto update because `name` was in `data`)</button><br>
<button @click="changenickname">this.person.nickname = 'pele'; (will not auto update because `nickname` was not in `data`)</button><br>
<button @click="changenicknameproperly">vue.set(this.person, 'address', '99th st.'); (will auto update even though `address` was not in `data`)</button>
<br>
<br>
for more info, read the comments in the code. or check the docs on <b>reactivity</b> (link below).
</div>
to master this part of vue, check the official docs on reactivity - change detection caveats. it is a must read!
score:2
if the computed property isn't referenced (e.g. "used") somewhere in your template code vue will skip reactivity for it.
first it's a bit confusing the way you're structuring the store and the state properties.
i would:
1) have a "videos" property in the store state
2) initialise it as an empty array
3) on application start populate it correctly with the "load" defaults, with a mutation that pushes the "default" video to it
4) have the components mapgetter
to it under the name of videos
5) whenever you load a component that "updates" the possible videos, then dispatch the action and call the appropriate mutation to substitute the store "videos" property
note: if components can have different "default" videos, then probably you'll want to have a videos
property in the store that is initialised as false
. this then allows you to have a computed property that uses the getter for the videos
property in the store and in case it is false
what i mean is, for the first case
// store
state: {
videos: []
}
getters: {
videos(state) { return state.videos }
}
//components
...
computed: {
videos() {
this.$store.getters.videos
}
}
for the second case
// store
state: {
videos: false
}
getters: { personal_videos(state) { return state.videos } }
//components
data() { return { default: default_videos } },
computed: {
...mapgetters([ 'personal_videos' ]),
videos() {
if (this.personal_videos) {
return this.personal_videos
} else {
return this.default
}
}
}
personal: give them better names -_- and the first option is the clearest
score:3
so turns out the whole issue was with video.js. i'm half tempted to delete this question, but i would not want anyone who helped to lose any points.
the solution and input here did help to rethink my use of watchers or how i was attempting this. i ended up just using the central store for now since it works fine, but this will need to be refactored later.
i had to just forego using video.js as a player for now, and a regular html5 video player works without issues.
Source: stackoverflow.com
Related Query
- Vue.js: Data is not updating with state change so the re-render does not happen
- Vue - Change in the state does not re render the template?
- Vue JS: vuex state not updating the component after change
- All vue props and data give the error 'Property ' ' does not exist on type ' with typescript
- Vue checkbox not updating with data change
- Vue 3: Component library with component that is composed of another does not render the base component
- Vue Router: fetching data from server (asynchronously with ajax) does not update the view in component
- Setting data in state not working in Vue 3 with Vuex 4
- Vue UI not updating with state changes, until I hover over it
- Vue.js does not seem to be updating the DOM on a variable change
- Element UI Tree Data not updating with Vue
- Vue data variable not updating after language change
- Vue Snapshot testing with RouterLinkStub does not render anchor as expected
- Vue 2; DOM not updating to data change and watcher
- Updating the DOM with change in an object (vue.js) - binding not working?
- Why does one Vue instance update with the data while another view instance doesn't?
- Vue composition api not working, data not set with the extracted data from the dabase
- why does pushing an item into a data array not update the view/vuejs dev tools with the new data?
- vue 3 - binding problem with select, if option selected is not showing in the new values, select is in blank,but it doesn't change to ""
- Vue 3 Router does not append a trailing slash to a parent view and so will not render the default child vue component
- Vue does not Render Template with Webpack, Compaining about Runtime Only Build
- Changing data with axios and vue when the page change
- Vue not updating Vuetify data-table from array with data from Axios request
- UI is not updating after data change in vue
- Vue v-for data does not get updated on properties change
- Vue js not updating view with files data but able to console log
- Vue v-bind:style not updating with nested data changes
- Why does Vue not recognise the data member used in the v-html property?
- Vue component not updating on state change
- Not able to update the data with @change in Vue js 2
More Query from same tag
- How can I catch Vue Warn '[Vue warn]: Missing required prop'
- How to use components in my custom js file in Laravel and Vue.js?
- How to update Vue.js data without binding html to methods?
- How can I use raw-loader in vue, and file-loader in scss
- Does laravel sanctum only generate access_token?
- Should i registerd all component to app.js or import in vue component
- error deploying a Vue-express-mongodb webapp (MEVN) in heroku
- How to make Javascript syntax (condtional with if-else) more efficient to make it better and easier to understand (Vue.js)
- Call great grand children component method
- v-for with index on iterable collection vue js not recongnisable
- Handle missing properties in a general purpose api using javascript
- Keep iframe content in vue component
- TypeScript unable to locate module (vue file) when trying to import
- Add a class to every child of a slot
- How to concatenate . (dot) with number in javascript
- Vue.js slots - how to retrieve slot content in computed properties
- How to create data properties in the App.vue file?
- unable to use $off and passing parameters in eventbus in Vue
- Vue Apollo Query not overwritting local data
- How to use vue-router with vue-touch-events
- Unable to deploy nuxt app to digital ocean health checks
- Mitt event bus, not working inside axios interceptor but works fine in my vue components
- VueJS: are multiple Single file components each a vue instance or nested objects?
- ts-toolbelt giving errors on node_modules. Type alias 'MergeList' circularly references itself
- Laravel responses good practice
- Vue Error: Invalid prop: type check failed for prop "participants". Expected Object, got Array
- Are vue components nested objects when compiled?
- How to use Electron webview with vuejs?
- Vue stored valued through props not being reactive
- vuetify test-utils & Jest : button click not handled