当我向列表中添加新项目时，为什么我的代码不会更新

Question

我正在尝试允许某个项目被推送到使用Vue.js循环播放的次数列表中。我不明白为什么当我单击按钮时出现列表项但没有显示文本。

HTML

 <div id="root">
    <input v-modle="newCat" v-on:keyup.enter="addKitty">
    <button v-on:click="addKitty">
      +add
    </button>
  <ul>
    <li v-for="cat in cats">{{ cat.name }}</li>
  </ul>
 </div>

Vue.js

 app = new Vue({
   el: '#root',
   data: {
     cats: 
       [{name: 'kitkat'},
       { name: 'fish'},
       { name: 'henry'},
       { name: 'bosco'}],
     //new data set
     newCat: ''
   },
   methods: {
     addKitty: function() {
        this.cats.push({
         name: this.newCat
       })
      this.newCat = ''
      }
  }
})

Answer 1

您的代码中有一个错字。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  String abc;
  FocusNode _node = FocusNode();
  GlobalKey<FormState> _key = GlobalKey<FormState>();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
          body: Form(
            key: _key,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Focus(
                  focusNode: _node,
                  onFocusChange: (bool focus) {
                    setState(() {});
                  },
                  child: Listener(
                    onPointerDown: (_) {
                      FocusScope.of(context).requestFocus(_node);
                    },
                    child: DropdownButtonFormField(
                      hint: Text('select value'),
                      value: abc,
                      items: <String>['A', 'B', 'C', 'D'].map((String value) {
                        return DropdownMenuItem<String>(
                          value: value,
                          child: Text(value),
                        );
                      }).toList(),
                      onChanged: (String newValue) {
                        setState(() {
                          abc = newValue;
                        });
                      },
                    ),
                  ),
                ),
                Text("value is $abc"),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () {
              setState(() {
                abc = null;
                _key.currentState.reset();
              });
            },
            tooltip: 'Reset',
            child: Icon(Icons.clear),
          )),
    );
  }
}

应该是：

<input v-modle="newCat" v-on:keyup.enter="addKitty">

请注意<input v-model="newCat" v-on:keyup.enter="addKitty"> 的拼写不同。