[Vue.js / js] Functionが思うように動かない。。

Question

#やりたいこと
<input>タグに@focus と @bulr をつけて、dataに定義したmarket_info: falseをtrue にしたい

#ソース
v-model関連の記述は省きます。
これでフォーカス時にtrueになると思うのですが、ならなく・・・

<template>
  <div>
    <input v-model="form.market_info_name" @input="onInputMarketInfo" @focus="onFocus('market_')" @blur="onBlur('market_')"
  </div>
<template>

<script>
  export default {
    data () {
      market_focus: false
    },
    methods: {
      onFocus (value) {
        Function("this." + value + "focus" + "=true")();
      },
      onBlur (value) {
        Function("this." + value + "focus" + "=false")()
      }
    }
  }
</script>

#調べたこと
こんな感じでconsole.log()を置いてみた

<template>
  <div>
    <input v-model="form.market_info_name" @input="onInputMarketInfo" @focus="onFocus('market_')" @blur="onBlur('market_')"
  </div>
<template>

<script>
  export default {
    data () {
      market_focus: false
    },
    methods: {
      onFocus (value) {
        console.log(value) // -> market_
        console.log(typeof value) // -> string
        Function("this." + value + "focus" + "=true")();
        console.log(this.market_focus) // -> false
      },
      onBlur (value) {
        Function("this." + value + "focus" + "=false")()
      }
    }
  }
</script>

やはりfalse

#ブラウザのコンソールで同様のことを試した

var value = "market_"
Function("$vm." + value + "focus" + "=true")()

こちらではmarket_focusの値がtrueになり、画面に期待している動きが現れた。

なぜmarket_focusの値がtrueにならないのでしょうか。
教えていただけると助かります。
よろしくお願い致します。

Answer 1

Function()()という記法を私は知らなかったのですが、わざわざ文字列で作らずとも、
タグ内は@focus="onFocus"
として

onFocus() {
  this.market_focus = true
}

とすればよいのではないでしょうか？
他の処理との兼ね合いでそういった実装になっているのかもしれませんが。

Comments

[tenten11055]

ご回答ありがとうございます。
おっしゃる通りで、他との兼ね合いのためです。

dataに定義したいのは`market_focus`の他に
`business_focus`と`name_focus`があります。
（htmlには3つそれぞれのinputタグがあります。）
そしてそれぞれに全く同じ処理を使いたい、、ので、
この処理の関数を書く回数を１回にしたいと思いました。

引数で'market_', 'business_', 'name_' のいずれかを渡し、
それに応じて対応するもの（this.business_focusなど）をtrueにしたいのが今回です。

説明不足で申し訳ありませんが、宜しくお願い致します。