[Vuejs]-Background events and editable foreground events in fullcalendar-vue

by

0👍

You must use the data object for two way binding. Computed properties are functions that are cached based on their reactive dependencies.

You should use methods for fetching data, not computed. You can use created to automatically trigger your function when the component is created.

new Vue({
  el: "#app",
  data: {
    selected: '',
    names: []
  },
  computed: {
    sayHello() {
      return 'HELLO ' + this.selected.toUpperCase()
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      setTimeout(() => {
        this.names = ['john doe', 'sam smith', 'bill hicks']
      }, 1000)
    }
  }
})
<div id="app">
  <div>
    <div v-if="!names.length">
      <p>Loading...</p>
    </div>
    <div v-else>
      <label>Select a name</label>
      <select v-model="selected">
        <option selected disabled>Select a name</option>
        <option v-for="name in names" :value="name">{{ name }}</option>
      </select>
      <br />
      <p>{{ sayHello }}</p>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Leave a comment