Vue.js vue-conversational-formを利用してインタラクティブなフォームを実装する

vue.jsのライブラリである 「vue-conversational-form」をインストールすると、インタラクティブ(対話的)なフォームを作成することができます。ここでは、 vue-conversational-formを利用するための手順と簡単な使い方を記述してます。
環境
- OS CentOS 8.0.1905 (Core)
- node v12.13.1
- npm 6.13.2
- @vue/cli 4.1.1
Vue環境構築
下記のコマンドで構築。今回は、vueappという名前でプロジェクトを作成してます。
vue create vueapp
プロジェクト作成時は、defaultを選択してます 。
Vue CLI v4.1.1? Please pick a preset: default (babel, eslint)
vue-conversational-formインストール
下記の手順でインストールします。
## 移動
cd vueapp
## インストール
npm i -S vue-conversational-form
vue-conversational-form使い方
src配下のApp.vueを下記のように編集します。
<template>
<div id="app">
<ConversationalForm @submit="submit">
<fieldset>
<label for="name">あなたの名前は?</label>
<input required data-question="あなたの名前は? " type="text" name="name" id="name">
</fieldset>
<fieldset>
<label for="thats-all">正しいですか?</label>
<button data-question="正しいですか?" data-success="登録しました" name="submit" type="submit" data-cancel="いいえ">はい</button>
</fieldset>
</ConversationalForm>
</div>
</template>
<script>
import ConversationalForm from 'vue-conversational-form';
export default {
components: {
ConversationalForm
},
methods: {
submit (o) {
console.log('Submit:')
console.log(o)
}
}
};
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
padding-top: 150px;
margin: 0 auto;
width: 800px;
}
</style>
起動します。
npm run serve
ブラウザから http://プライベートIP:8080 に アクセスすると、インタラクティブ(対話的)なフォーム が作成されていることが確認できます。

-
前の記事
IT資産管理ツール「Snipe-IT」をdockerを使用して構築する手順 2020.03.26
-
次の記事
React.js Axios利用時にCORSによるブロックを回避する方法 2020.03.27
コメントを書く