Solution for vue to get data but not render it on the page

  • 2021-09-24 21:16:22
  • OfStack

You can get data, but you can't render it on the page

Problem description: I got all the data, console written in js. log (musics) data printed out correctly, but it is not displayed in the page.

Most of the time, the data is processed, but there is no change and no effect on the page. It is no problem to print data with console. log, especially arrays and objects are prone to this problem;

1. this. $set (xxx)
Save variables

2. this. $forceUpdate (xxx)
Forced update, forcing Vue instance to render again. Note that it only affects the instance itself and the subcomponents that insert the slot contents, not all the subcomponents.

In addition: In addition, variable names conflict, such as the following silly p situation


<script>
export default {
  name: 'xxx',
  props: {
    musics: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      musics:[]
    }
  }
</script>

Solution:
Remove musics: [] from js code data,


Related articles: