質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

0回答

955閲覧

【Vue.js】Composition APIの書き方でバインディングなどされず、is not defined...エラーになってしまう

roronoazoro

総合スコア113

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2020/10/22 12:21

Intro to Vue 3 + Composition API: Build a Todo Appというyoutubeのハンズオン動画を参考にComposition APIの学習しているのですが、作業途中、以下のようなエラーとなってしまいます。

[Vue warn]: Property or method "newTodo" is not defined on the instance but referenced during render.

以下、どれもインスタンスで定義されていませんとなってしまい、どのように解決すればいいのかわからずにいます。

  • newTodo
  • todos
  • addNewTodo

##コード

vue

1<template> 2 <div> 3 <h1>Vue 3 Todo App</h1> 4 <form @submit.prevent="addNewTodo"> 5 <label>New Todo</label> 6 <input v-model="newTodo" name="newTodo" /> 7 <button>Add New Todo</button> 8 </form> 9 <ul> 10 <li v-for="todo in todos" :key="todo.id"> 11 <h3>{{ todo.content }}</h3> 12 </li> 13 </ul> 14 </div> 15</template> 16 17<script> 18import { ref } from "vue"; 19// import { defineComponent, ref, reactive } from "@vue/composition-api"; 20 21export default { 22 setup() { 23 // 初期化 24 const newTodo = ref(""); 25 const todos = ref([]); 26 27 // listに追加 28 function addNewTodo() { 29 todos.value.push({ 30 done: false, 31 content: newTodo.value, 32 }); 33 } 34 return { 35 todos, 36 newTodo, 37 addNewTodo, 38 }; 39 }, 40}; 41</script> 42 43<style> 44#app { 45 font-family: Avenir, Helvetica, Arial, sans-serif; 46 -webkit-font-smoothing: antialiased; 47 -moz-osx-font-smoothing: grayscale; 48 text-align: center; 49 color: #2c3e50; 50 margin-top: 60px; 51} 52</style>

エラーキャプチャ

イメージ説明

環境

node v13.12.0 @vue/composition-api": "^1.0.0-beta.18

なにかアドバイスいただけると助かります。
よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問