常連

自己紹介

vue-multiselectを利用し、複数選択フォームを作成しています。
https://vue-multiselect.js.org/#sub-tagging

submitでPOST送信したいのですが、どうしたら良いでしょうか？

selectの場合、
```html
<select>
<option value="1">A</option>
<option value="2">B</option>
</select>
```
と書けば、1とか2という値が渡されると思います。

それと同じように、vue-multiselectを使って、
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
<option value="5">E</option>
のように1、2、3、4、5の値を渡したいです。（フォームに表示されるのは、A、B、C、D、Eです。）

下記のサイトには、「1つ注意点としては、selectタグを操作している訳では無いので、POST値で飛ばす時にはinput=hiddonなどにデータを持たせる必要があります。」とあるのですが、そこが良く分かりません。
https://www.kabanoki.net/4224/

現状下記のように書いています。
```html
<form method="post">
    <div id="app">
        <multiselect
            v-model="selected"
            :options="options"
            :multiple="true"
            :close-on-select="true"
            placeholder="choice tags">
        </multiselect>
    </div>
    <button type="submit">登録</button>
</form>

<script>
    Vue.component('multiselect', window.VueMultiselect.default)
    new Vue({
        el: "#app",
        data: {
            selected: ['A', 'B'],
            options: ['A', 'B', 'C', 'D', 'E']
        },
    })
</script>
```

どのように記載すべきか、ご教示頂けましたらありがたいです。
よろしくお願いします。

vue-multiselectを利用し、submitでPOST送信したい

### 前提・実現したいこと
・rails6
・vue.js
・階層
app
-javascript
 --packs
   |_application.js
   |_login.js
 --login.vue
 --users.vue

login.vueというコンポーネントファイルに、users.vueの内容を表示したいです。
login.vueはlogin.jsで
```
document.addEventListener('DOMContentLoaded', () => {
    const login_app = new Vue({
      render: h => h(Login)
    }).$mount()
    document.body.appendChild(login_app.$el)
    console.log(login_app)
})
```
のようなファイルを作り、erbで``<%= javascript_pack_tag 'log_in' %>``という形で表示しております。

### 発生している問題・エラーメッセージ
users.vueが表示れない。
原因が分からない。前提としてlogin.vueは表示されている。

### 該当のソースコード

```
//login.vue
<template>
    <div id="login">
       /*中略*/
    </div>
　　 <Users></Users>
</template>

<script>
import user from ./users; //該当箇所
/*中略*/
</script>

====================

//users.vue
<template>
  <div id="Users">
      users
  </div>
</template>

<script>
export default {
      name: "Users"
}
</script>
```

### 具体的な不具合
```import User from ./users```の箇所で
vscodeがエラー文言を出しており、`expression expected`とusers.vueが読み込まれていない。
また`<Users></Users>`の箇所も`The template root requires exacrly one element`というエラー文言が出ているため読み込まれない。
ネットに落ちていた情報を見様見真似で書いているのでそもそも、記法が合っているか分からないです。
またこのような方法以外にusers.vueをlogin.vueで表示する方法をご存知でしたら、
ご教示いただけると幸いです。
よろしくお願いします。

### その他
users.vueに関しましては、login.jsのようなerbで読み込むためのjsファイルは作成しておりません。

(rails×vue) 一つの単一コンポーネントファイルに他のコンポーネントファイルを読み込みたい

Vue.js v3.xで、配列の要素をそれぞれHTML上で変更して、Vue.js側のデータでも変更する方法はありますか。
配列にしたいのは、要素数を動的に変更したいためです。

下記のようにやると、input上の要素は変更されますが、Vue.js側のデータが変更されてなれません。

```html
<!DOCTYPE html>

<html>

<head>
  <title>Deep Numbers</title>
</head>

<body>
  <script src="https://unpkg.com/vue@next"></script>

  <div id="app">
    <ul>
      <li v-for="number of numbers">
        <input v-model="number" type="number">
      </li>
    </ul>

    <div>{{ numbers }}</div>
  </div>

  <script>
    const app = Vue.createApp({
      data(){
        return {
          numbers: [0, 1, 2, 3, 4],
        }
      },
    })
    app.mount('#app')
  </script>
</body>

</html>
```

これは自分が単に詰まっているだけなので、これをベースにせずに、「自分だったら、こうやれる」という例をみせていただけるとありがたいです。

Vue.jsで配列の各要素を別々に変更して反映させるには

１つのコンポーネントに対して複数のコンポーネントからデータを取得することは可能でしょうか？？
実現したい内容としては、
component1
component2
component3
でそれぞれデータを取得し、そのデータ（list1,list2,list3）を元にCSVを作成するcomponent4を作りたいです。
そのために、component4内でcomponent1,2,3のデータにアクセスしたいと考えております。
調べると1対1のコンポーネント間のデータの受け渡しの記事が多く、1対複数で実現可能かご教授頂きたいです。
もし可能であればその用法の名称など教えて頂ければ幸いです。よろしくお願いします。



```
１コンポーネントでまとめました。ご回答者様へのご報告用

<template>
    <div class="col-sm-2 col-form-label">
        <h3>請選擇客戶名字</h3>
        <v-select id="sel1" v-model="tableSelected1" :on-change="fetchTags1()" :options="tables">
            <option v-for="table in tables1" :key='table.id'>{{ table }}</option>
        </v-select>
        <ul v-if="errors && errors.length">
            <li v-for="error of errors" :key='error.id'>
                {{error.message}}
            </li>
        </ul>

        <h2>請選擇標籤</h2>
        <v-select v-model="tagSelected1" :options="tags1">
            <option v-for="tag in tags1" :key='tag.id'>{{ tag }}</option>
        </v-select>
        <ul v-if="errors && errors.length">
            <li v-for="error of errors" :key='error.id'>
                {{error.message}}
            </li>
        </ul>

        <h3>請選擇客戶名字</h3>
        <v-select id="sel2" v-model="tableSelected2" :on-change="fetchTags2()" :options="tables">
            <option v-for="table in tables" :key='table.id'>{{ table }}</option>
        </v-select>
        <ul v-if="errors && errors.length">
            <li v-for="error of errors" :key='error.id'>
                {{error.message}}
            </li>
        </ul>
        <h2>請選擇標籤</h2>
        <v-select v-model="tagSelected2" :options="tags2">
            <option v-for="tag in tags2" :key='tag.id'>{{ tag }}</option>
        </v-select>
        <ul v-if="errors && errors.length">
            <li v-for="error of errors" :key='error.id'>
                {{error.message}}
            </li>
        </ul>

        <h3>請選擇客戶名字</h3>
        <v-select id="sel3" v-model="tableSelected3" :on-change="fetchTags3()" :options="tables">
            <option v-for="table in tables" :key='table.id'>{{ table }}</option>
        </v-select>

        <ul v-if="errors && errors.length">
            <li v-for="error of errors" :key='error.id'>
                {{error.message}}
            </li>
        </ul>
        <h2>請選擇標籤</h2>
        <v-select v-model="tagSelected3" :options="tags3">
            <option v-for="tag in tags3" :key='tag.id'>{{ tag }}</option>
        </v-select>
        
        <ul v-if="errors && errors.length">
            <li v-for="error of errors" :key='error.id'>
                {{error.message}}
            </li>
        </ul>
        <button id="btn" @click="creatCsv">確定</button>
    </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      tables: '',
      tableSelected1: '',
      tags1: '',
      tagSelected1: '',
      tableSelected2: '',
      tags2: '',
      tagSelected2: '',
      tableSelected3: '',
      tags3: '',
      tagSelected3: ''
    }
  },
  created () {
    axios.get('API1').then(response => {
      this.tables = response.data
    })
      .catch(e => {
        this.errors.push(e)
      })
  },        
  methods: {
    fetchTags1: function () {
      axios.get('API2', {
        params: {
          tableName: this.tableSelected1
        },
      }).then(response => {
        this.tags1 = response.data
      })
        .catch(e => {
          this.errors.push(e)
        })
    },
    fetchTags2: function () {
      axios.get('API2', {
        params: {
          tableName: this.tableSelected2
        },
      }).then(response => {
        this.tags2 = response.data
      })
        .catch(e => {
          this.errors.push(e)
        })
    },
    fetchTags3: function () {
      axios.get('API2', {
        params: {
          tableName: this.tableSelected3
        },
      }).then(response => {
        this.tags3 = response.data
      })
        .catch(e => {
          this.errors.push(e)
        })
    },
    creatCsv: function () {
      alert(this.tagSelected1);
    }
  }
}
</script>

```

1対複数のコンポーネント間でデータのやりとりは可能でしょうか？？

### 
vue-property-decoratorのPropSyncで、以下のように複数の変数を1つのモデルに格納して、
子コンポーネントから親コンポーネントへ値を渡したいと考えています。
以下のような書き方をすると、実行時にエラーが出力されます。
どのようにすれば親コンポーネントへモデルを渡すことができますでしょうか？

* モデル(InfoModel.ts)
```
export default class InfoModel {
  public personNumber: string;
  public personName: string;
  public personAge: number;

  constructor(personNumber: string, personName: string, personAge: number) {
    this.personNumber = personNumber;
    this.personName = personName;
    this.personAge = personAge;
  }
}
```

* 子コンポーネント(Child.vue)
```
<template>
  <div>
    <v-card>
      <v-form>
        <v-card-text>
          <v-row>
            <v-col>
              <v-text-field
                v-model="personNumber"
                label="番号"
                maxlength="3"
              />
            </v-col>
          </v-row>
          <v-row>
            <v-col cols="6">
              <v-text-field
                v-model="personName"
                label="名前"
                maxlength="10"
              />
            </v-col>
            <v-col cols="6">
              <v-text-field
                v-model="personAge"
                maxlength="3"
                label="年齢"
              />
            </v-col>
          </v-row>
        </v-card-text>
      </v-form>
    </v-card>
  </div>
</template>

<script lang="ts">
import { Component, Vue, PropSync } from 'vue-property-decorator';
import InfoModel from '../../InfoModel';

@Component
export default class Child extends Vue {

  private personNumber!: string;
  private personName!: string;
  private personAge!: number;

  // TODO 情報を1つのモデルに格納する。
  @PropSync('personInfomation', { type: Object, default: null })
  private infoModel: InfoModel = new InfoModel(
    this.personNumber,
    this.personName,
    this.personAge
  );
}
</script>
```

* 親コンポーネント(Parent.vue)
```
<template>
  <v-container>
    <v-card>
      <Child
        :person-information.sync="personInformation"
      />
    </v-card>
  </v-container>
</template>

<script lang="ts">
import { Component, PropSync, Vue } from 'vue-property-decorator';
import InfoModel from '../../InfoModel';
import Child from '@/components/Child.vue';

@Component({
  components: {
    Child,
  },
})
export default class Parent extends Vue {
   private personInformation = new InfoModel('', '', 0);
}
</script>
```

* 実行時エラー
```
[Vue warn]: The computed property "infoModel" is already defined in data.
```

【Vue.js】PropSyncの使い方について

```html
コード
 <form action="#">
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <th>猫or犬</th>
          <td>
          <label>
            <input
              type="radio"
              name="cat"
              id="neko"
              value="猫"
              checked="checked"
              onclick="entryChange1()"
            />猫
          </label>
          <label>
            <input
              type="radio"
              name="cat"
              id="dog"
              value="犬"
              onclick="entryChange1()"
              
            />犬
          </label>
        </td>
        </tr>
        

        
        <br> 
        <tr id="CATp">
          <th>年齢</th>
          <td>
        <select name="CATage" onChange="number02()">
          <option  value="0">0</option>
          <option  value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
          <option value="13">13</option>
          <option value="14">14</option>
        </select>
      </td>
    </tr>
      
        
        <tr id="dogPO">
        <th>年齢</th>
        <td>
        <select name="DOGage">
          <option value="0">0</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
          <option value="13">13</option>
        </select>
      </td>
      </tr>
      </table>
      <button>入力</button>
    </form>
    <script type="text/javascript" src="pet.js"></script>
    <script type="text/javascript" src="pet2.js"></script>
```
```js
コード
--pet2.js--
function number02() {
  select = document.getElementsByName('CATage')


  if(entryChange1== "neko" && number02== "0") {
  document.write("asdd")
  }
}


```
例えば猫と0を選択した場合はasddとブラウザに表示、犬と1を選択した場合はabcdと表示　のように選択した値によって表示される文章を変えたいのですが猫と0を選択して入力ボタンを押してもasddが表示されません

jsで、formから送信された値によって表示される文を変える

nuxtで最後にボタンを押して５秒待ってから処理を開始するプログラムを書こうと思ったのですが、以下のコードではうまくいきません。
console.log(date, "date");でログが終わってしまいます。
dataの中身を変更してしまっているので再レンダリングされてしまっているのが原因かと思ったのですが、回避方法が思いつきませんでした。

```ここに言語を入力
<template>
  <div id="app">
    <button @click="waitFunc">push</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data: function () {
    return {
      start: "",
      started: false,
      timer: 0,
      count: 0,
      PassageID: "",
    };
  },
  methods: {
    waitFunc: function () {
      this.count++;
      this.setStart();
      console.log("pushed!", this.start);
      if (!this.started) this.startManeger();
    },
    setStart: function () {
      this.start = new Date();
      this.timer = 0;
    },
    startManeger: function () {
      console.log("started maneger");
      this.PassageID = setInterval(this.detector(), 20);
    },
    detector: function () {
      let date = (new Date() - this.start) / 1000;
      console.log(date, "date");
      let time = this.timer + 1;
      if (date === time) {
        this.timer++;
        console.log(this.timer, "timer");
      }
      if (this.timer >= 5) {
        console.log("5sec");
        //押されず５秒経過
        clearInterval(this.PassageID);
        this.PassageID = "";
        this.timer = 0;
        //send count
        this.count = 0;
        this.start = "";
        this.started = false;
      }
    },
  },
};
</script>
```

Nuxt Vue 最後のclickからｎ秒待ってから処理をする関数の書き方でこまった。

### 前提・実現したいこと

全くの初心者です。

Progateというサイトを使って基本的な文法は経験しています。
(Java.JavaScript,php,HTML,css,SQL)
しかしひたすら文法のことをやるだけでは実際の業務でつかえるような内容が経験できず困っています。

入社して二年目なのですが会社としては仕事をさせながら経験を積んでくれればいいといった感じだったのですが
コロナのこともありなかなかそういった現場がないのが現状で
恥ずかしながらいまだに右も左もわかりません。

先日VMwareで環境を作ってその中でプログラミングしたり、トータスsvnを使ってコミットしたりといったことを経験できたのですが
こういった道具の使い方を何か作りながら勉強したいです。

こうやって勉強した,こうやって勉強しているところだ
といったことを教えていただけたら幸いです。

勉強の仕方を知りたいです。

node.jsを使って小規模なシステムを制作（勉強）しています。その際、データを保存する・呼び出す元をjsonファイルとしており、例えばdatabese.jsonをオブジェクトにして加工、jsonファイルに上書き、というような動きを取っています。

jsonの中の連想配列は、一つのアイテムに100程度の項目、それが50個程度と（計500程度のデータ）くらいが現段階での最大数です。そもそも閉じられた環境で使用することを前提としておりセキュリティに重点を置いていませんが、勉強不足で重点を置けていないとも言えます。


nodeのデータベースで勉強をするとすればmongoDB等がすぐにヒットしますが、敷居が高そうに見えてなかなか挑戦できません。そもそも現在データベースとして使っているjsonファイルが簡単だし慣れているのでなかなか前向きな姿勢になれません。

そこで私が今使っている「jsonファイルをデータベースにしたとき」の脆弱性や課題を教えていただけませんか？またはmongo等のデータベースを使うメリットを教えていただけないでしょうか。
そもそも上記環境では大差ないのであれば無駄な学習コストを避けjsonを使い続けようと思います。