WailsとVue.jsでECSリリースツールの実装をしています。
あまりjsをガシガシ書いてこなかったので、勉強しながら記事を書いています。
自己的なメモになりますので大した内容になっていません、すみません
間違っている箇所がありましたら、ご指摘ください!
TODO
- textareaにJSONを出力
前提
技術 |
---|
Vue.js 2系 |
macOS Catalina 10.15.7 |
事象
ECSのタスク定義をVueテンプレートに表示できなかった。
つまづいた点は2つです。
-
-
<textarea>{{ecs.task}}</textarea>
はできない
-
- pタグだとobjectでも出力できていた→同様にできると思った
-
- JSONをstringにキャストする方法を知らなかった
間違えた方法
<template>
<div class="container">
<!-- ECS -->
<h3>ECSの現在</h3><hr>
<textarea>{{ecs.task}}<textarea/>
<!-- [元凶] 下記だと文字として表示 -->
<p>{{ecs.task}}<p/>
<p>タスクリソース名:{{ecs.taskarn}}</p>
<p>タスク定義した人:{{ecs.taskupdater}}</p>
</div>
</template>
<script>
export default {
data() {
return {
ecs: {
task: "",
taskarn: "",
taskupdater: "",
}
};
},
methods: {
getECSTask: function() {
var self = this;
window.backend.ECS.GetTask().then(result => {
let td = result.TaskDefinition;
// Objectのまま変数に入れてしまった
self.ecs.task = td;
self.ecs.taskarn = td.TaskDefinitionArn;
let brf = td.RegisteredBy;
if (brf !== null || typeof(brf) !== undefined) {
self.ecs.taskupdater = brf.replace(/arn:aws:iam::(\d+):user\//, '');
}
});
}
},
beforeMount() {
this.getECSTask();
}
};
</script>
解決
1つ目の問題
- 二重中括弧は
プレーンテキストとして扱われる
-
v-model
はデータバインディングを作成する - 基本的にはユーザ入力データを更新するための使われる
- textarea/selectなどにつかわれる
2つ目の問題
- JSONをstringに変換するには
JSON.stringify
を使う - 第2引数=>結果をどう変換するか(好きな形に変えられるコールバック)
- 第3引数=>数値指定
JSONのインデントは2つ派なので、第3引数に2を指定しました。
空白を指定する人もいるそうで、\t
でタブでもいいかもですね!
/**
* Converts a JavaScript value to a JavaScript Object Notation (JSON) string.
* @param value A JavaScript value, usually an object or array, to be converted.
* @param replacer A function that transforms the results.
* @param space Adds indentation, white space, and line break characters to the return-value JSON text to make it easier to read.
*/
stringify(value: any, replacer?: (this: any, key: string, value: any) => any, space?: string | number): string;
結論
上記を踏まえた結果こうなりました。
Vueって書きやすくてよいですね、ハマりそうです
正しい方法
<template>
<div class="container">
<!-- ECS -->
<h3>ECSの現在</h3><hr>
<!-- ↓変更箇所 -->
<textarea v-model="ecs.task" />
<p>タスクリソース名:{{ecs.taskarn}}</p>
<p>タスク定義した人:{{ecs.taskupdater}}</p>
</div>
</template>
<script>
export default {
data() {
return {
ecs: {
task: "",
taskarn: "",
taskupdater: "",
}
};
},
methods: {
getECSTask: function() {
var self = this;
window.backend.ECS.GetTask().then(result => {
let td = result.TaskDefinition;
// JSON.stringifyを使って引数指定
self.ecs.task = JSON.stringify(td, null, 2);
self.ecs.taskarn = td.TaskDefinitionArn;
let brf = td.RegisteredBy;
if (brf !== null || typeof(brf) !== undefined) {
self.ecs.taskupdater = brf.replace(/arn:aws:iam::(\d+):user\//, '');
}
});
}
},
beforeMount() {
this.getECSTask();
}
};
</script>
参考
https://gunmagisgeek.com/blog/javascript/3783
https://blog.katsubemakito.net/nodejs/json-pretty
https://eslint.vuejs.org/rules/no-textarea-mustache.html