Vueコンポーネント内でv-if/v-modelを使いたい！！

Question

前提・実現したいこと

Vue.jsのCDN版を利用しています。
クリック操作で要素を表示できるようにしたいです。
それにあたってVueコンポーネント内でv-ifを使いたいのですが、
Vueインスタンスを記述するとエラーと警告が発生しました。

ほとんどの警告はVue-routerに関連する部分のようです。
elementはtemplate内に記述しているコンポーネントの一部なので、
恐らくそれが原因かと思いますが、
解決方法がさっぱりわかりません。

発生している問題・エラーメッセージ

Cannot find element: #fav-tile

vue.js:634 [Vue warn]: Property or method "checkfig" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Anonymous>
       <Root>
warn	@	vue.js:634
warnNonPresent	@	vue.js:2047
has	@	vue.js:2092
eval	@	VM6387:3
Vue._render	@	vue.js:3551
updateComponent	@	vue.js:4067
get	@	vue.js:4478
Watcher	@	vue.js:4467
mountComponent	@	vue.js:4074
Vue.$mount	@	vue.js:9044
Vue.$mount	@	vue.js:11944
init	@	vue.js:3125
merged	@	vue.js:3308
createComponent	@	vue.js:5973
createElm	@	vue.js:5920
createChildren	@	vue.js:6048
createElm	@	vue.js:5949
createChildren	@	vue.js:6048
createElm	@	vue.js:5949
patch	@	vue.js:6509
Vue._update	@	vue.js:3946
updateComponent	@	vue.js:4067
get	@	vue.js:4478
Watcher	@	vue.js:4467
mountComponent	@	vue.js:4074
Vue.$mount	@	vue.js:9044
Vue.$mount	@	vue.js:11944
(anonymous)	@	main.js:264

該当のソースコード

/* 略 */
const Page1 = {
  template: `
<div class="content">
/* 略 */
  <div class="container">
     <input type="checkbox" v-model="checkfig" /> チェックを入れる
        <div v-if="checkfig" id="fav-tile">ok</div>
  </div>
</div>
` }

const routes = [
  { path: '/', component: Home },
  { path: '/page1', component: Page1 },
/* 略 */
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router
}).$mount('#app')

new Vue({
  el: '#fav-tile',
    data: {
        checkflg : false,
    }
});

      <script src="https://unpkg.com/vue/dist/vue.js"></script>
      <script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>
      <script src="./js/NavItem.js"></script> 
      <script src="./main.js" defer></script>

試したこと

条件分岐が無い状態での表示は確認できています。
scriptタグ内にdeferを書いたり書かなかったりしても同様でした。

Answer 1

iとlでタイポされてますが、それが問題では？

• checkfig
• checkflg

Comments

[marronnier]

おっしゃる通りタイポをしていました。
しかし、これを直しても解決できませんでした。