Vue.js for PHP people

(https://eyskens.me/vue.js-for-php-people)

So instead of setting up a whole new folder structure like for the big frameworks let’s just load the framework into your existing PHP codebase

<script src="https://unpkg.com/vue"></script>

The next step is to add a place where Vue.js can do it’s magic, a div in your local view controller will be fine:

<div id="helloName">
  <p>Hello {{ name }}!</p>
  <input v-model="name">
</div>

Next up is a script tag:

var app = new Vue({
  el: '#helloName', // specify where the magic happens
  data: {
    name: 'Human' // add a default value, or fetch from your server
  }
})

var app = new Vue({
  el: '#helloName', // specify where the magic happens
  data: {
     selected: '1',
    options: [
      { text: 'Human', value: '1' },
      { text: 'Robot', value: '2' },
      { text: 'Cyborg', value: '3' }
    ]
  }
})

var app = new Vue({
  el: '#songs', // specify where the magic happens
  created: function() { // equals onReady
    this.getLastPlayed(); // this -> methods
  },
  data: {
    songs: [] // initialise empty data
  },
  methods: {
    getLastPlayed: function() {
      this.$http.get('https://itframe.innovatete.ch/nowplaying/hit1fm') // does a HTTP GET request
        .then(function(response) {
          this.songs = response.body // pushes the JSON parsed body to the data
        })
    }
  }
})

var app = new Vue({
  el: '#songs', // specify where the magic happens
  created: function() { // equals onReady
    this.getLastPlayed(); // this -> methods
  },
  data: {
    songs: [] // initialise empty data
  },
  methods: {
    getLastPlayed: function() {
      this.$http.get('https://itframe.innovatete.ch/nowplaying/hit1fm') // does a HTTP GET request
        .then(function(response) {
          this.songs = response.body // pushes the JSON parsed body to the data
        })
    },
    deleteSong: function(index) {
    	this.songs.splice(index,1);
    }
  }
})

var app = new Vue({
  el: '#songs', // specify where the magic happens
  created: function() { // equals onReady
    this.getLastPlayed(); // this -> methods
  },
  data: {
    songs: [] // initialise empty data
  },
  methods: {
    getLastPlayed: function() {
      this.$http.get('https://itframe.innovatete.ch/nowplaying/hit1fm') // does a HTTP GET request
        .then(function(response) {
          this.songs = response.body // pushes the JSON parsed body to the data
        })
    },
    deleteSong: function(index) {
    	this.songs.splice(index,1);
    }
  }
})


setInterval(function(){
	app.songs.push({ artist: "Thomas More", song: "Expect More JS" })
}, 1000)

var app = new Vue({
  el: '#songs', // specify where the magic happens
  created: function() { // equals onReady
    this.getLastPlayed(); // this -> methods
  },
  data: {
    songs: [], // initialise empty data
    searchText: ""
  },
  computed: { // computed values change toghether with the ones they use
    filteredSongs: function() {
      var self = this // clone "this" as it will change in the next function()
      return self.songs.filter(function(song) { // filter songs on a given function
        return song.artist.toLowerCase().indexOf(self.searchText.toLowerCase()) !== -1 //use toLower to make it incasesensitive
      })
    }
  },
  methods: {
    getLastPlayed: function() {
      this.$http.get('https://itframe.innovatete.ch/nowplaying/hit1fm') // does a HTTP GET request
        .then(function(response) {
          this.songs = response.body // pushes the JSON parsed body to the data
        })
    },
    deleteSong: function(index) {
      this.songs.splice(index, 1);
    }
  }
})