@daigaleposted at 2021-06-10

VueのコードをNuxtで使用したいです。

Q&A

JavaScript Vue.js Binding プログラミング初心者 Nuxt

当方、Webサイトを作ろうとしている、プログラミング初心者になります。

解決したいこと

この方が使用されているような、Vueのバインディングを使ったクリックで切り替わるようなものをNuxtで使用したいです。

発生している問題・エラー

CompornentsディレクトリにClick.vueという形で入れて読み込みたいのですが、
Nuxtを使った場合の、メソッドの書き方というのがイマイチわかっていません;

どのようにVueのコードを書き換えれば機能するのか、教えていただきたいです。

よろしくおねがいします。

該当するソースコード

<template>
  <div id="app">
   <div class="item" v-for="item in list">
    <div v-if="!item.edit" v-text="item.value" v-on:click="item.edit = true"></div>
    <input v-if="item.edit" type="text" 
            v-model="item.value" v-on:blur="item.edit = false"  v-auto-focus>  
  </div>
</div>
</template>

<script>
export default {

Vue.directive('auto-focus', {
  bind: function () {
    var el = this.el;
    Vue.nextTick(function(){
        el.focus();
    });
  }
})

new Vue({
    el: '#app',
    data: function(){
        return {
        value: 'Test',
        edit: false
      }
    }
})

}
</script>

2Answer

@harmless_3d6 posted at 2021-06-10

Nuxtjsは自動で読み込んでくれるだけで
書き方はvueのコンポーネントと一緒だったと思います。

「list」の中身がわからないので動くコード書けないですけど、
以下のような感じかなーと思います。


<template>
    <div class="item" v-for="item in list">
        <div v-if="!item.edit"
            v-text="item.value"
            v-on:click="item.edit = true">
        </div>
        <input v-else
            type="text" 
            v-model="item.value"
            v-on:blur="item.edit = false">
	</div>
</template>

<script>
  export default {
    data() {
      return {
        list: []
      }
    }
  }
</script>

オートフォーカスは、inputタグに動的にref設定しておいて、
this.$nextTickでdom更新後にフォーカス当てれば再現できそう。

1Like

Comments

@daigale
Questioner
回答ありがとうございます！
色々と試していたら、以下のコードで実現できました！
が、コード量的に無駄なことをしているような気も。。。

@daigale posted at 2021-06-11

<template>
<div id="app">
  <template v-if="f">
    <input v-model="v" @keyup.enter="f = false" @blur="f = false" ref="r1" />
  </template>
  <template v-else="">
    <span @click="c">{{v}}</span>
  </template>
</div>
</template>

<script>
export default {
  data(){
    return {
        v: "文字",
        f: false
        }
  },
    methods: {
      c: function() {
        this.f = true
        this.$nextTick(function () { this.$refs.r1.focus() })
      },
    },
  }
</script>