VueRuBook.ch8

by Vladimir

HTML

<div id="app">
  <h1>
  Chariot's shop
  </h1>
  <ol>
    <chariot v-for="chariot in chariots" :key="chariot.name" :chariot="chariot" :selected="selected" @sel="sel">
    </chariot>
  </ol>
</div>

<template id="lol">
  <li>
    {{chariot.name}} has {{chariot.horses}} horses
    <button v-text="buttonText(chariot)" @click="select(chr)" :disabled="selected == chariot">
    </button>
  </li>
</template>

CSS

body {
  background: #fff;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}
:disabled {
  border: 1px solid #F00;
}

Vue

Vue.component('chariot', {
	template: "#lol",
  props: ["chariot", "selected"],
  methods: {
  	select: function(chr) {
    	this.$emit('sel', chr);
    },
    buttonText: function(chr) {
  		var text = "Select";
      if(JSON.stringify(this.selected) == "{}") {
      	text = "Select";
      } else if(this.selected == chr) {
      	text = "Go";
      } else if(this.selected.horses > chr.horses) {
      	text = "Decline horses";
      } else if(this.selected.horses < chr.horses) {
      	text = "Add horses";
      }
    	return text;
  	}
  },
  computed: {
  	
  }
  
});

new Vue({
  el: "#app",
  data: {
  	selected: {},
  	chariots: [
    	{
      	name: 'Olymp',
        horses: 4
      },
      {
      	name: 'Saggita',
        horses: 3
      },
      {
      	name: 'Ikar',
        horses: 2
      },
      {
      	name: 'Abraksas',
        horses: 1
      }
    ]
  },
  computed:{
  },
  methods: {
		sel: function(chr) {
    	this.selected = chr;
    }
  },
  created: function() {

  }
})