Edited at

Vue.jsメモ:属性、ループ内呼び出し、など

More than 1 year has passed since last update.

Vue.js勉強したメモ。

まずはVue.jsのサイトにあるガイドの「はじめに」をコピペでテスト。そこからちょっとずつ変更を加えていって学んだこと。バージョンはVue.js v2.3.3です。


学んだこと:


参考ページ:


コード(HTMLとJavaScript)

<div id="project-list">

active project: {{ active }}
<ul>
<li v-for="project in projects" v-bind:class="['project-list', active_id == project.id ? 'project-active' : '']">
<a v-bind:href="'#' + project.id">{{ project.id }}. {{ project.name }}</a>&nbsp;
<button v-on:click="loadProject(project)"></button>
</li>
</ul>
</div>

    let vm = new Vue({

el: '#project-list',
data: {
active_id: null,
projects: [
{ id: '1', name: 'private'},
{ id: '2', name: 'work'}
]
},
methods: {
loadProject: function(project) {
project.name = project.name + '!';
this.active_id = project.id;
}
}
});


属性を扱う場合はv-bindを使う

<a v-bind:href="'#' + project.id">

いわゆるHTMLの属性にムスターシュを書いても動かない。

属性を動的に変えたい場合はv-bindを使う。

例えばhref属性のリンクURLにproject.idを使う場合は、v-bindの後に、属性名(href)を入れて指定する。コメントの中はJavaScriptなので、普通の文字列を使う場合はクオートする(例:'#')。


ループ変数をメソッド呼び出しに使うには

<li v-for="project in projects">

<button v-on:click="loadProject(project)">
...

        methods: {

loadProject: function(project) {
project.name = project.name + '!';
this.active_id = project.id;
}
}

Vueモデルに定義したloadProjectメソッドを呼び出す際に、ループの変数を渡す方法。わかってしまえば当たり前で、メソッドの引数に入れれば動く。

内容は、プロジェクト名に「!」を追加する。そして選択されたことを示すために、this.active_id = project.idとしておく。


クラスの動的変更

<li v-bind:class="['project-list', active_id == project.id ? 'project-active' : '']">

選択されたプロジェクトの表示を変更したい場合。クラスを動的に変更することで対応する。全てのプロジェクトにはproject-listというクラスが付与されている。

loadProjectを呼び出してプロジェクトを選択すると、Vueモデルのactiveプロパティにproject.idを設定する。ので、activeproject.idを比較して、同じ場合はproject-activeクラスを付与すると簡単に対応できた。

Vue.jsから手軽に始めるJavaScriptフレームワークのコードをもとに作成してみた。


全ページ

<!DOCTYPE html>

<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style type="text/css">
ul {
margin: .3em 0 0 0;
padding: 0;
list-style: none;
}
.project-list:before {
margin: 0;
content: '>';
color: gray;
}
.project-active {
font-weight:bold;
}
.project-active:before {
content: '>';
color: red;
}
</style>
</head>
<body>
<h1>Tasks</h1>

<div id="project-list">
active project: {{ active }}
<ul>
<li v-for="project in projects" v-bind:class="['project-list', active_id == project.id ? 'project-active' : '']">
<a v-bind:href="'#' + project.id">{{ project.id }}. {{ project.name }}</a>&nbsp;
<button v-on:click="loadProject(project)"></button>
</li>
</ul>
</div>

<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://unpkg.com/vue" crossorigin="anonymous"></script>
<script type="text/javascript">

let vm = new Vue({
el: '#project-list',
data: {
active_id: null,
projects: [
{ id: '1', name: 'private'},
{ id: '2', name: 'work'}
]
},
methods: {
loadProject: function(project) {
project.name = project.name + '!';
this.active_id = project.id;
}
}
});
</script>
</body>
</html>