none
無法理解MVC和Vue.js的生命週期 RRS feed

  • 問題

  • 前輩好,最近用Vue.js寫前端,

    但跑不出資料,不能理解原因..

    原本期望:網頁載入完成後,將資料載入到NewInfo變數中,接著透過Vue.js去動態改變Div內的值

    但不知道為什麼都跑不出來。

    NewInfo在Console中看到是有抓到的,但NewsInfo都是undefined。

    F12沒有任何錯誤,也有確實抓到值

    以下為程式碼

    <script type="text/javascript">
    
        var newInfo = getInfo('1');
    
        function getInfo(n) {
        $.ajax({
            type: 'POST',
            url: '@Url.Action("getInfo", "Home")',
            datatype: 'json',
         }).success(function (result) {
            alert(n);
            newInfo = result;
        });}
    
        window.onload = function () {
            var newsO = new Vue({
                el: '#news',
                data: {
                    newsInfo: newInfo
                },
                mounted: function () {
                    getInfo('2');
                }
            });
        }
    
    </script>
    
    <div v-for="item in newsInfo">
        <div>{{item.InfoDate}}</div>
        <div><a href="~/Info/InfoDetail/Detail?{{item.InfoID}}">{{item.InfoTitle}}</a></div>
    </div>
    

    原本想說是不是NewInfo被蓋掉了,結果多次重新整理網頁,發現有時候會先跑

    var newInfo = getInfo('1');

    但有時候會先跑

      mounted: function () {
                    getInfo('2');
                }

    看不出來到底誰先載入...


    請問前輩我哪邊有問題..,謝謝指點



    • 已編輯 HumorA 2018年7月7日 上午 10:35
    2018年7月7日 上午 10:33

解答

  • 你忘記JSON.parse

    Ajax返回資料是字串不是集合物件如圖(上面json字串是ajax返回的資料,下面是JSON.Parse轉換的物件):
    並且要把生命週期事件改成 beforeMount


    以下是我寫的簡單DEMO:
    線上DEMO測試連結

    效果圖:

    View:

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
    
    <div id='news'>
        <div v-for="item in newsInfo">
            <div>InfoDate: {{item.InfoDate}}</div>
            <div>
                InfoTitle: <a href='@Html.Raw(@"~/Info/InfoDetail/Detail?{{item.InfoID}}")'>{{item.InfoTitle}}</a>
            </div>
        </div>
    </div>
    
    <script type="text/javascript">
    
            var app = new Vue({
                el: '#news',
                data: {
                    newsInfo: []
                },
    		  methods: {
                    getInfo(n) {
                        $.ajax({type: 'POST',datatype: 'json',url: '@Url.Action("getInfo", "Home")'
    			         , success: function(result){
                                console.log(result);
                                console.log(app.newsInfo);
                                app.newsInfo = JSON.parse(result);
                        }});
    	           }
                }
                ,beforeMount() {
                    this.getInfo(1)
                },
            });
        
    </script>

    Control:

    using System;
    using System.Web.Mvc;
    using System.Collections.Generic;
    using Newtonsoft.Json;
    using Newtonsoft.Json.Converters;
    
    namespace TEST
    {
    	public class HomeController : Controller
    	{
            static List<dynamic> TestDataList = new List<dynamic>(){
                   new {
                        InfoTitle = "標題1", InfoDate = DateTime.Now
                             ,InfoID = 1
                   },
                   new {
                        InfoTitle = "標題2", InfoDate = DateTime.Now
                             ,InfoID = 2
                   }
              };
    
            [HttpGet]
            public ActionResult Index()
            {
                return View();
            }
    
    
            [HttpPost]
            public ActionResult getInfo()
            {
                return Content(JsonConvert.SerializeObject(TestDataList));
            }
    	}
    }





    • 已編輯 IT-Wei 2018年7月7日 下午 12:57
    • 已標示為解答 HumorA 2018年7月7日 下午 01:55
    2018年7月7日 下午 12:40

所有回覆

  • 你忘記JSON.parse

    Ajax返回資料是字串不是集合物件如圖(上面json字串是ajax返回的資料,下面是JSON.Parse轉換的物件):
    並且要把生命週期事件改成 beforeMount


    以下是我寫的簡單DEMO:
    線上DEMO測試連結

    效果圖:

    View:

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
    
    <div id='news'>
        <div v-for="item in newsInfo">
            <div>InfoDate: {{item.InfoDate}}</div>
            <div>
                InfoTitle: <a href='@Html.Raw(@"~/Info/InfoDetail/Detail?{{item.InfoID}}")'>{{item.InfoTitle}}</a>
            </div>
        </div>
    </div>
    
    <script type="text/javascript">
    
            var app = new Vue({
                el: '#news',
                data: {
                    newsInfo: []
                },
    		  methods: {
                    getInfo(n) {
                        $.ajax({type: 'POST',datatype: 'json',url: '@Url.Action("getInfo", "Home")'
    			         , success: function(result){
                                console.log(result);
                                console.log(app.newsInfo);
                                app.newsInfo = JSON.parse(result);
                        }});
    	           }
                }
                ,beforeMount() {
                    this.getInfo(1)
                },
            });
        
    </script>

    Control:

    using System;
    using System.Web.Mvc;
    using System.Collections.Generic;
    using Newtonsoft.Json;
    using Newtonsoft.Json.Converters;
    
    namespace TEST
    {
    	public class HomeController : Controller
    	{
            static List<dynamic> TestDataList = new List<dynamic>(){
                   new {
                        InfoTitle = "標題1", InfoDate = DateTime.Now
                             ,InfoID = 1
                   },
                   new {
                        InfoTitle = "標題2", InfoDate = DateTime.Now
                             ,InfoID = 2
                   }
              };
    
            [HttpGet]
            public ActionResult Index()
            {
                return View();
            }
    
    
            [HttpPost]
            public ActionResult getInfo()
            {
                return Content(JsonConvert.SerializeObject(TestDataList));
            }
    	}
    }





    • 已編輯 IT-Wei 2018年7月7日 下午 12:57
    • 已標示為解答 HumorA 2018年7月7日 下午 01:55
    2018年7月7日 下午 12:40
  • 非常感謝前輩! 有了
    2018年7月7日 下午 01:55