Simple component v-model not updating.

huangapple
go评论94阅读模式
英文:

Simple component v-model not updating

问题

以下是您要翻译的内容：

"So I'm finally trying to get my head into the Laravel using Vue scene.

For the life of me, I can't work out why this simple component v-model doesn't seem to be updating the on page content.

  1. <template>
  2.     <div class="row">
  3.         <div class="col-12">
  4.             <div id="card" class="card">
  5.                 <div class="card-header">
  6.                     <h4>{{ header }}</h4>
  7.                 </div>
  8.                 <div class="card-body">
  9.                     <input v-model="newItem" type="text" placeholder="title">
  10.                     <hr>
  11.                     ( {{ newItem }} )
  12.                     <ul>
  13.                         <li v-for="item in items" :key="item.id">{{ item.label }}</li>
  14.                     </ul>
  15.                 </div>
  16.             </div>
  17.         </div>
  18.     </div>
  19. </template>
  21. <script>
  22.     export default {
  23.         name: "add-category",
  24.         data() {
  25.             return {
  26.                 header: 'Add Category',
  27.                 newItem: '',
  28.                 items: [
  29.                     { id: 1, label: 'TESTING 123' },
  30.                     { id: 2, label: 'TESTING ABC' },
  31.                 ]
  32.             }
  33.         },
  34.         methods: {
  36.         }
  37.     }
  38. </script>

Simple component v-model not updating.

No matter what text is added in the input, the content between the ( ) never updates and remains blank?

I was following this vue tutorial video here: https://vueschool.io/lessons/user-inputs-vue-devtools-in-vue-3?friend=vuejs

From what I can tell, it should be working?

Could this be a conflict related to Laravel potentially?

Any thoughts are much appreciated."

英文:

So I'm finally trying to get my head into the Laravel using Vue scene.

For the life of me, I can't work out why this simple component v-model doesn't seem to be updating the on page content.

  1. &lt;template&gt;
  2.     &lt;div class=&quot;row&quot;&gt;
  3.         &lt;div class=&quot;col-12&quot;&gt;
  4.             &lt;div id=&quot;card&quot; class=&quot;card&quot;&gt;
  5.                 &lt;div class=&quot;card-header&quot;&gt;
  6.                     &lt;h4&gt;{{ header }}&lt;/h4&gt;
  7.                 &lt;/div&gt;
  8.                 &lt;div class=&quot;card-body&quot;&gt;
  9.                     &lt;input v-model=&quot;newItem&quot; type=&quot;text&quot; placeholder=&quot;title&quot;&gt;
  10.                     &lt;hr&gt;
  11.                     ( {{ newItem }} )
  12.                     &lt;ul&gt;
  13.                         &lt;li v-for=&quot;item in items&quot; :key=&quot;item.id&quot;&gt;{{ item.label }}&lt;/li&gt;
  14.                     &lt;/ul&gt;
  15.                 &lt;/div&gt;
  16.             &lt;/div&gt;
  17.         &lt;/div&gt;
  18.     &lt;/div&gt;
  19. &lt;/template&gt;
  21. &lt;script&gt;
  22.     export default {
  23.         name:&quot;add-category&quot;,
  24.         data(){
  25.             return {
  26.                 header: &#39;Add Category&#39;,
  27.                 newItem: &#39;&#39;,
  28.                 items: [
  29.                     {id: 1, label:&#39;TESTING 123&#39;},
  30.                     {id: 2, label:&#39;TESTING ABC&#39;},
  31.                 ]
  32.             }
  33.         },
  34.         methods:{
  36.         }
  37.     }
  38. &lt;/script&gt;

Simple component v-model not updating.

No matter what text is added in the input, the content between the ( ) never updates and remains blank?

I was following this vue tutorial video here:https://vueschool.io/lessons/user-inputs-vue-devtools-in-vue-3?friend=vuejs

From what I can tell, it should be working?

Could this be a conflict related to Laravel potentially?

Any thoughts are much appreciated.

答案1

得分: 0

如此看来，我的问题似乎出在我如何设置 app.js 上，或者说我应该说没有设置，因为它似乎并没有通过 Laravel 使用 Vue，而是通过主 HTML 文件上的一个包含。

所以我移除了那些包含，并将我的 app.js 更改为以下内容，一切都按预期开始工作了！

  1. require('./bootstrap')
  3. // 1. 定义路由组件。
  4. const Home = { template: '<div>Home</div>' }
  5. const About = { template: '<div>About</div>' }
  7. import Welcome from './components/App.vue';
  8. import CategoryList from './components/category/List.vue';
  9. import CategoryCreate from './components/category/Add.vue';
  10. import CategoryEdit from './components/category/Edit.vue';
  12. // 2. 定义一些路由
  13. const routes = [
  14.     { path: '/', component: Home },
  15.     { path: '/about', component: About },
  16.     { path: '/welcome', component: Welcome },
  17.     { path: '/category', component: CategoryList },
  18.     { path: '/category/:id/edit', component: CategoryEdit },
  19.     { path: '/category/add', component: CategoryCreate },
  20. ]
  22. window.axios = require("axios");
  24. import { createRouter, createWebHistory } from 'vue-router';
  25. const router = createRouter({
  26.     history: createWebHistory(process.env.BASE_URL),
  27.     routes
  28. })
  30. window.Vue = require("Vue");
  32. const app = Vue.createApp({})
  33. app.use(router)
  34. app.mount('#app')

所以现在我的 v-model 更新如预期一样！

英文:

So it seems like my issue was with how I had my app.js setup, or should I say wasn't setup as it didn't seem to be using vue via Laravel rather via an include on the main html file.

So I have removed those includes and changed my app.js to the following and it all started working as expected!

  1. require(&#39;./bootstrap&#39;)
  3. // 1. Define route components.
  4. const Home = { template: &#39;&lt;div&gt;Home&lt;/div&gt;&#39; }
  5. const About = { template: &#39;&lt;div&gt;About&lt;/div&gt;&#39; }
  7. import Welcome from &#39;./components/App.vue&#39;;
  8. import CategoryList from &#39;./components/category/List.vue&#39;;
  9. import CategoryCreate from &#39;./components/category/Add.vue&#39;;
  10. import CategoryEdit from &#39;./components/category/Edit.vue&#39;;
  12. // 2. Define some routes
  13. const routes = [
  14.     { path: &#39;/&#39;, component: Home },
  15.     { path: &#39;/about&#39;, component: About },
  16.     { path: &#39;/welcome&#39;, component: Welcome },
  17.     { path: &#39;/category&#39;, component: CategoryList },
  18.     { path: &#39;/category/:id/edit&#39;, component: CategoryEdit },
  19.     { path: &#39;/category/add&#39;, component: CategoryCreate },
  20. ]
  22. window.axios = require(&quot;axios&quot;);
  24. import { createRouter,createWebHistory} from &#39;vue-router&#39;
  25. const router = createRouter({
  26.     history: createWebHistory(process.env.BASE_URL),
  27.     routes
  28. })
  30. window.Vue = require(&quot;Vue&quot;);
  32. const app = Vue.createApp({})
  33. app.use(router)
  34. app.mount(&#39;#app&#39;)

So now my v-model updates as expected!

Simple component v-model not updating.

huangapple
  • 本文由 发表于 2023年5月21日 23:02:24
  • 转载请务必保留本文链接：https://go.coder-hub.com/76300535.html
  • laravel-8
  • v-model
  • vuejs3
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定