mu-list with icon left

by Rocka

HTML

<script src="https://fonts.googleapis.com/icon?family=Material+Icons"></script>
<script src="https://unpkg.com/[email protected]/dist/muse-ui.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/muse-ui.css">
<div id="app">
<div id="list">
  <mu-list>
    <template v-for="shell in list" >
      <mu-list-item v-if="shell.enabled" :title="shell.name" >
        <mu-icon slot="left" value="done" />
      </mu-list-item>
      <mu-list-item v-else :title="shell.name">
        <mu-icon slot="left" value=" " />
      </mu-list-item>
    </template>
  </mu-list>
  <mu-list>
    <template v-for="shell in list" >
      <mu-list-item v-if="shell.enabled" :title="shell.name" >
        <mu-icon slot="left" value="done" />
      </mu-list-item>
      <mu-list-item v-else :title="shell.name">
      </mu-list-item>
    </template>
  </mu-list>
  <mu-list>
    <template v-for="shell in list" >
      <mu-list-item :title="shell.name" >
        <mu-icon v-if="shell.enabled" slot="left" value="done" />
      </mu-list-item>
    </template>
  </mu-list>
</div>
  <button @click="chsh" >
    chsh
  </button>
</div>

CSS

#list {
  display: flex;
  flex-direction: row;
}

JavaScript

new Vue({
	el: '#app',
  data() {
  	return {
    	list: [
      	{name: 'sh', enabled: false},
      	{name: 'bash', enabled: false},
      	{name: 'zsh', enabled: false},
      	{name: 'fish', enabled: true}
      ]
    };
  },
  methods: {
  	chsh() {
    	this.list.some((e,i) => {
      	if(e.enabled) {
        	e.enabled = false;
          this.list[(i+1)%4].enabled = true;
          return true;
        }
      });
    }
  }
});