Help us understand the problem. What is going on with this article?

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

More than 3 years have 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>
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした