Category: Vue.js

[V3 Vue.js] dataとcomputedの書き方

為替計算をサーバーサイド側ではなく、フロント側で実装しようと、Vue.jsを書いていたら、Vue.jsっていつの間にか2系から3系にバージョンアップしてたのね。知らなかった。。orz…
※為替レートはAPIで取得してサーバーサイドから流し込みます。

– new Vueではなく、Vue.createApp({})として、app.mount(‘#app’)とする。

             <div class="card-body" width="" height="">
                  <label for="yen">日本円を入力(単位円)</span></label>
                  <input type="number" v-model.number="yen" class="form-control col-md-2">
                  <br>
                  <label for="dollar">ドル換算</span></label>
                  <input type="string" v-model="dollar" id="dollar" class="form-control col-md-2">
                  <a href="javascript:OnLinkClick();">コピー</a>
              </div>

// 省略

  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data() {
          return {yen: 10000}
      },
      computed:{
          dollar(){
           return Number(this.yen / 110.05).toLocaleString('en-US', {style:'currency', currency:'USD'});
         }
      },
    });
    app.mount('#app')
  </script>

焦るな、というかtype scriptちゃんと勉強しないとついていけなくなりそう

[Vue.js] select boxのv-model

v-modelはselect boxでも基本はinput textと同じ。
初期値をセットする。

<?php

$value = "4m,6m,9m,12m";

$data = explode(",",$value);

?>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
	<?php
		echo "<select v-model=\"size\" name=\"hoge\">";
		foreach($data as $value){
			echo "<option value=\"" .$value. "\">" .$value. "</>";
		}
		echo "</select>";
	?>
	<br><br>
	<form action="#" method="POST">
  		<input type="text" name="size" v-model="size">
	  	<button type="submit" class="btn btn-default btn-order">送信</button>
  	</form>
  	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
	<script>
		new Vue({
		  el: '#app',
		  data: {
		    size: '<?php echo $data[0]; ?>',
		  }
		})
	</script>
</body>
</html>

OKでしょう。
Vueもいいが、Reactでちゃんとアプリを作りたいな。

[Vue.js]Selectの初期値をdataで渡す

注文数の個数の変更の箇所をinputではなく、selectにしたい

select文を作成して、vue.jsのdataでvalueをv-modelに渡せば良い

<body>
	<div id="app">
		<form>
			<select v-model="selected_item">
				<?php for($i=0; $i<10; $i++){
					echo "<option value='$i'>$i</option>";
				}
				?>
			</select>
		</form>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
	<script>

		const num = 5;

		var vm = new Vue({
			el: '#app',
			data: {
				selected_item: num,
			}
		});
	</script>

</body>
</html>

ずーと悩んでたけど、割と簡単にできたな🔥🔥🔥

### Vueと言えばこの本

Vue.jsでフォーム入力値の計算

– ユーザ入力がない場合はplaceholderを表示し、入力があった場合は、合計値をdisabledの入力フォームに表示させたい

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h1>Test</h1>
	<div id="app">
		<p>{{message}}</p>
		<input type="number" v-model.number="input1_1" placeholder="1回目の得点を入力"> + <input type="number" v-model.number="input1_2" placeholder="2回目の得点を入力"> = <input type="text" v-model.number="add1" disabled id="total"  placeholder="合計点" >

	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				message: 'Hello',
				input1_1:'',
				input1_2:'',
			},
			computed: {
				add1: function(){
					return this.input1_1 + this.input1_2
				}
			}
		})
	</script>
</body>
</html>

未入力

フォーム1のみ入力

フォーム1、フォーム2に入力

フォーム1のみ入力した場合でも、合計値にきちんと反映されています。
vue.jsのdataで、input1_1:”,　としていますが、 input1_1:, とすると、動かなくなるので注意が必要です。

Vue.jsでユーザが入力フォームの行を追加出来るようにしたい1

見積登録画面で、費目の行を必要に応じてユーザが追加出来るようにしたい。

WF

Front(途中)

### Vue.jsでテスト実装
– Vue.jsはインラインで実装する
– 配列IDを持たせておき、ユーザが追加ボタンを押すと、フォームの行が追加され、inputフォームのnameには配列のIDを挿入する

<div class="row justify-content-center mt-3">
		<div class="col-8">
			<form class="row">
				<div id="app" class="col-12">
					<div class="row d-flex justify-content-between form-group mb-3">
						<input-field
							v-for="item in route_input"
							v-bind:todo="item"
							v-bind:key="item"
						></input-field>
					</div>
					<div class="row d-flex justify-content-around form-group">
						<div @click="add_route" class="btn btn-info col-2">追加</div>
					</div>
				</div>
			</form>
		</div>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>

		var data_array = ['1','2','3'];

		new Vue({
			el: '#app',
			data: {
				route_input: data_array,
			},
			methods: {
				add_route: function(){
					var add = this.route_input.length + 1;
					this.route_input.push(add)
				}
			},
			components: {
				'input-field':{
					template: `
							<div class="route_count col-12 mb-3 row d-flex justify-content-between">
								<input class="col-3 form-control" type="text" :value="todo.time" :name="'route&#91;' + todo + '&#93;&#91;time&#93;'">
								<input class="col-8 form-control" type="text" :value="todo.place" :name="'route&#91;' + todo + '&#93;&#91;place&#93;'">
							</div>`,
					props: ['todo']
				}
			}
		})
	</script>

見たところ行けそうな予感はある。
DBのカラムは10個ぐらいにしたいので、if add < 10 then add の処理も追加する必要があるか。ちょっと複雑だな。

NuxtJSを触ってみる

公式: NUXT JS
Vue.js に基づいたプログレッシブフレームワーク
Universalモード、SPAモード、Generateモードの3つのモードで柔軟にサイトを設計できる

### 機能
– Vue ファイルで記述できること（*.vue）
– コードを自動的に分割すること
– サーバーサイドレンダリング
– 非同期データをハンドリングするパワフルなルーティング
– 静的ファイルの配信
– ES2015+ のトランスパイレーション
– JS と CSS のバンドル及びミニファイ化
– 要素の管理
– 開発モードにおけるホットリローディング
– プリプロセッサ: Sass, Less, Stylus など
– HTTP/2 push headers ready
– モジュール構造で拡張できること

### 動作
Vue2(Vue本体), Vue Router(Routing), Vuex(Vue版Flux), Vue Server Render(ServerSideレンダリング), Vue Meta(メタ情報管理)

### NuxtJSを始めよう
$ cat /etc/os-release
NAME=”Ubuntu”
VERSION=”18.04.4 LTS (Bionic Beaver)”
// 以下略

// npm, nodejsインストール
$ sudo apt install -y nodejs npm
$ node -v
v8.10.0
$ npm -v
3.5.2

// npmを最新化
$ sudo npm install npm@latest -g

$ sudo npm install -g vue-cli // sudo権限がないとエラーになる

$ vue init nuxt-community/starter-template sample
? Project name sample
? Project description Nuxt.js project
? Author hpscript

$ cd sample
$ ls
README.md components middleware package.json plugins store
assets layouts nuxt.config.js pages static
$ sudo npm install
$ sudo npm run dev

> sample@1.0.0 dev /home/vagrant/local/sample
> nuxt

FATAL Unexpected token { 13:12:14

} catch {
^

ん？ nodeがv8.10.0では古いよう。
最新に上げます。

$ sudo npm install n -g
$ sudo n stable
$ sudo apt purge -y nodejs npm
$ exec $SHELL -l
$ node -v
v12.18.3
$ npm -v
6.14.6
$ sudo npm run dev

vagrantのprivate networkが192.168.33.10なので、
nust.config.jsのサーバの設定も変更する必要があります。

module.exports = {
  // 省略
  server: {
    port: 8000, // デフォルト: 3000
    host: '192.168.33.10' // デフォルト: localhost
  },
  // 省略 
}

/pages/users/index.vue

<template>
	<section class="container">
		<div>
			<h1>user index page</h1>
			<p>count={{count}}</p>
			<button @click="addCount">カウントアップ</button>
		</div>
	</section>
</template>

<script>
export default {
	computed: {
		count() { return this.$store.state.counter.count }
	},
	methods: {
		addCount(e){
			this.$store.commit('counter/add')
		}
	}
}
</script>

/store/counter.js

export const state = () => ({
	count: 0
})

export const mutations = {
	add (state){
		state.count += 1
	}
}

Vue.jsでtinymce-vueを使ってv-modelをaxiosでpost

問題:TinyMCEのTextareaをVue.jsのv-modelで取得してaxiosでpostしようとしたが上手くいかない。
->TinyMCEでVue.jsを使えるようにできるパッケージ[tinymce-vue]があるらしい

まず、Vue.jsでのtinymce-vueの使い方のテスト。

$ npm install –dev @tinymce/tinymce-vue

/node_modules/@tinymce/tinymce-vue/lib/browser/tinymce-vue.min.js
の 「tinymce-vue.min.js」を任意の場所(tinymce-vue/)に移動

tinymce-vue.min.jsを読み込んで、後はTinyMCEのQuick Guideの通りに書いてみる。

    <h1>TinyMCEテスト</h1>
    <form method="post" action="confirm.php">
    <div id="app">
        <editor
          api-key="no-api-key"
          :init="{
            heigt: 500,
            menubar: false,
            plugins: &#91;
               'advlist autolink lists link image charmap print preview anchor',
               'searchreplace visualblocks code fullscreen',
               'insertdatetime media table paste code help wordcount'
             &#93;,
             toolbar:
               'undo redo | formatselect | bold italic backcolor | \
               alignleft aligncenter alignright alignjustify | \
               bullist numlist outdent indent | removeformat | help'
          }"
          :other_options="other_options"
          v-model="message"
        />
    </div>
    <input type="submit" value="送信">
    </form>
<script src="tinymce-vue/tinymce-vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
    el: '#app',
    components: {
        'editor': Editor
        
    },
    data: {
        message: 'hello!',
        other_options: {
            language_url: 'tinymce-vue/ja.js'
        }
    },
})
</script>

あれ？　v-modelは上手くいってる？　other_optionsでlanguage_urlを指定しているけど、これは上手くいってない？？

あ、optionではなく、:initの方に書いたらlanguage_urlもできた。

<editor
          api-key="no-api-key"
          :init="{
            heigt: 500,
            menubar: false,
            language: 'ja',
            language_url: 'js/tinymce/langs/ja.js',
            plugins: &#91;
               'advlist autolink lists link image charmap print preview anchor',
               'searchreplace visualblocks code fullscreen',
               'insertdatetime media table paste code help wordcount'
             &#93;,
             toolbar:
               'undo redo | formatselect | bold italic backcolor | \
               alignleft aligncenter alignright alignjustify | \
               bullist numlist outdent indent | removeformat | help',
            
          }"
          v-model="message"
        />

これを実装してテスト
VueでTinyMCE使えないとなり一瞬諦めかけましたが、一つ一つ公式のチュートリアル、Githubからクリアーしていくと、意外と簡単に行けました。
やっぱり入力フォームに絵文字がないとね🙋‍♂️

Vue.jsでTinyMCEを使いたい

– TinyMCEのTextareaをVue.jsのv-modelで取得してaxiosでpostしようとしたが上手くいかない。
– TinyMCEでVue.jsを使えるようにできるパッケージがあるらしい。

Official: tinymce-vue
Get started: TinyMCE Vue.js integration quick start guide
Reference: TinyMCE Vue Technical Reference
Demo: Controlled input

quick start guideに沿ってやっていきます。
$ npm -v
6.13.4
$ sudo npm install -g @vue/cli
$ vue create –default tinymce-vue-demo
$ cd tinymce-vue-demo
$ npm install –save @tinymce/tinymce-vue

// Vueがインストールされたか挙動確認
$ npm run serve
http://192.168.33.10:8080/

//公式通りに書いていきます。
src/App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <editor
      api-key="no-api-key"
      :init="{
        heigt: 500,
        menubar: false,
        plugins: &#91;
           'advlist autolink lists link image charmap print preview anchor',
           'searchreplace visualblocks code fullscreen',
           'insertdatetime media table paste code help wordcount'
         &#93;,
         toolbar:
           'undo redo | formatselect | bold italic backcolor | \
           alignleft aligncenter alignright alignjustify | \
           bullist numlist outdent indent | removeformat | help'
      }"
    />
  </div>
</template>

<script>
import Editor from '@tinymce/tinymce-vue'

export default {
  name: 'app',
  components: {
    'editor': Editor
  }
}
</script>

なんとなく行けそうなのはわかった。

さて、これをどうやって実装するかだな。。

Vue.jsでCarbonの代わりにmoment.jsを使用する

### view

<template v-for="m in messages>
  // 省略
  <span>@{{ m.created_at |  moment  }}</span>
  // 省略
</template>

### script
– Vueのmethods内でmoment()を呼び出し、filtersでformatを指定する

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js" type="text/javascript"></script>
<script>
new Vue({
　　el: '#app',
　　filters: {
　　　moment: function (date) {
　　　return moment(date).format('MM/DD HH:mm');
　　　}
　　},
　　data: {
　　// 省略
　　},
   methods: {
   // 省略
　　 moment: function () {
　　　 return moment();
　　 }
   },
   mounted(){
   // 省略
   }
});
</script>

momentはvueの中で指定しないとうまく動かない。
make:resourceでサーバ側でcarbonで整形することも考えたが、コントローラの処理が複雑な為、クライアント側でフォーマット化する。

Vue.jsでLaravelのリレーション(belongsTo, hasMany)の値を表示

## Messageモデル
– usersテーブルに対し、messagesテーブルがbelongsToのリレーション関係

public function user(){
        return $this->belongsTo('App\User');
    }

## controller

$messages =Message::where(function($q) use ($foo, $hoge){
// 省略
})->orderBy('***','ASC')->get();

### 通常時のblade
– $message->user->name で名前を呼び出す

@foreach($messages as $message)
// 省略
{{ $message->user ? $message->user->name : '削除済ユーザ' }}
// 省略
@endforeach

# Vue.js使用時
## controller
– with(‘user’)でユーザテーブルの情報も取得する

return Message::with('user')->where(function($q) use ($foo, $hoge){
// 省略
})->orderBy('***','ASC')->get();

## blade
– vueで表示する際は、m.user.name と書く

<div v-for="m in messages">
  // 省略
  <span v-text="m.user.name"></span>
  // 省略
</div>

belongsToもVueで表示できるのか！？　表示できないなら、Vueは断念しようかと思ってた。