jsもvueもどちらも単体で学ぶ必要がある。 jsもvueもそれぞれ仕様がある。 vueにも決まったルールがあるし、jsにもjsの仕様がある。 これらがわかると、あとは組み合わせたり、定番パターンを使えばできそうな気がする

watchで監視する値に変更があったら実行して欲しい事を書いた。 watchEffectも似たようなもん。 qiita.com <script setup> import { ref,watch } from 'vue' const todoId = ref(1) const todoData = ref(null) async function fetchData() { todoData.value = null const …

computedを使い、 変更があった場合に自動で変更させるようにする <script setup> import { ref, computed } from 'vue' let id = 0 const newTodo = ref('') const hideCompleted = ref(false) const todos = ref([ { id: id++, text: 'Learn HTML', done: true }, { id: …

computedを使い、 変更があった場合に自動で変更させるようにする <script setup> import { ref, computed } from 'vue' let id = 0 const newTodo = ref('') const hideCompleted = ref(false) const todos = ref([ { id: id++, text: 'Learn HTML', done: true }, { id: …

computedを使い、 変更があった場合に自動で変更させるようにする <script setup> import { ref, computed } from 'vue' let id = 0 const newTodo = ref('') const hideCompleted = ref(false) const todos = ref([ { id: id++, text: 'Learn HTML', done: true }, { id: …

値を作る時は、適切な入力値を決めて、それが与えられている & 重複した値がない場合のみ、追加処理を行う const createName = () => { if (!isValidInput()) { console.log("無効なので作成しません") return } const fullName = `${first.value} ${last.va…

こんな感じで、pushする際はref関数でvalueにアクセスして足す。 v-forの中で、todoを取り出せているから、それはvalueはいらない これが基本 <script setup> import { ref } from 'vue' // give each todo a unique id let id = 0 const newTodo = ref('') const todos = …

こんな感じで、ref属性にアクセスして反転させれば良いだけ。 反転したのをvalueに入れる。 ifの下した認識されないのがルール <script setup> import { ref } from 'vue' const awesome = ref(true) function toggle() { awesome.value = !awesome.value } </script> <template> <button @click="toggle">toggle</button> <h1 v-if="awesome">Vue i</h1></template>…

このような画面があったとして、選択した値を更新する処理はこう書けばいい こう書くと、選ばれた値でnamesの配列からindex番号で検索をかけて、その値に対して、selected.value毎、入力フォームの値を打ち込めば良い。 そうすると、次に更新ボタンを押した…

jsではループの回し方は色々ある if (names.includes(selected.value)) { return console.log("もうあるよ") } names.filter((name) => { if (name === selected.value) { return console.log("もうあるよ") } }) しかし、こういうコードを書かなくても、デ…