javascript - vuejs ajax obtient des données et dom n'est pas mis à jour
淡淡烟草味
淡淡烟草味 2017-06-12 09:29:54
0
7
1275

J'ai téléchargé en ligne l'application à emporter Ele.me à haute imitation Vue.js

data.json 修改了,但是dom不更新, 求大神解答!!!

{
  "seller": {
    "name": "粥品香坊(回龙观)",
    "description": "蜂鸟专送111111",
    "deliveryTime": 38,
    "score": 4.2,
    "serviceScore": 4.1,
    "foodScore": 4.3,
    "rankRate": 69.2,
    "minPrice": 20,
    "deliveryPrice": 4,
    "ratingCount": 24,
    "sellCount": 90,
    "bulletin": "粥品香坊其烹饪粥料的秘方源于中国千年古法,在融和现代制作工艺,由世界烹饪大师屈浩先生领衔研发。坚守纯天然、0添加的良心品质深得消费者青睐,发展至今成为粥类的引领品牌。是2008年奥运会和2013年园博会指定餐饮服务商。",
    "supports": [
      {
        "type": 0,
        "description": "在线支付满28减5"
      },
      {
        "type": 1,
        "description": "VC无限橙果汁全场8折"
      },
      {
        "type": 2,
        "description": "单人精彩套餐"
      },
      {
        "type": 3,
        "description": "该商家支持发票,请下单写好发票抬头"
      },
      {
        "type": 4,
        "description": "已加入“外卖保”计划,食品安全保障"
      }
    ],
    "avatar": "http://static.galileo.xiaojukeji.com/static/tms/seller_avatar_256px.jpg",
    "pics": [
      "http://fuss10.elemecdn.com/8/71/c5cf5715740998d5040dda6e66abfjpeg.jpeg?imageView2/1/w/180/h/180",
      "http://fuss10.elemecdn.com/b/6c/75bd250e5ba69868f3b1178afbda3jpeg.jpeg?imageView2/1/w/180/h/180",
      "http://fuss10.elemecdn.com/f/96/3d608c5811bc2d902fc9ab9a5baa7jpeg.jpeg?imageView2/1/w/180/h/180",
      "http://fuss10.elemecdn.com/6/ad/779f8620ff49f701cd4c58f6448b6jpeg.jpeg?imageView2/1/w/180/h/180"
    ],
    "infos": [
      "该商家支持发票,请下单写好发票抬头",
      "品类:其他菜系,包子粥店",
      "北京市昌平区回龙观西大街龙观置业大厦底商B座102单元1340",
      "营业时间:10:00-20:30"
    ],
    "choosePlace": [
      "福楼1号菜桌",
      "会议楼露厅",
      "会议楼一层大圆桌"
    ]
  },
}

Entrée : APP.vue

<template>
  <p>
    <v-header :seller="seller"></v-header>
    <p class="tab border-1px">
      <p class="tab-item">
        <router-link to="/goods">商品</router-link>
      </p>
      <p class="tab-item">
        <router-link to="/ratings">评论</router-link>
      </p>
      <p class="tab-item">
        <router-link to="/seller">商家</router-link>
      </p>
    </p>
    <keep-alive>
      <router-view :seller="seller"></router-view>
    </keep-alive>
  </p>
</template>

<script type="text/ecmascript-6">
  import {urlParse} from 'common/js/util';
  import header from 'components/header/header.vue';

  const ERR_OK = 0;

  export default {
    data() {
      return {
        seller: {
          id: (() => {
            let queryParam = urlParse();
            return queryParam.id;
          })()
        }
      };
    },
    created() {
      this.$http.get('/api/seller?id=' + this.seller.id).then((response) => {
        response = response.body;
        if (response.errno === ERR_OK) {
          this.seller = Object.assign({}, this.seller, response.data);
        }
      });
    },
    components: {
      'v-header': header
    }
  };

</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "./common/stylus/mixin.styl"

  .tab
    display: flex
    width: 100%
    height: 40px
    line-height: 40px
    // border-bottom: 1px solid rgba(7, 17, 27, 0.1)
    border-1px(rgba(7, 17, 27, 0.1))
    .tab-item
      flex: 1
      text-align: center
      & > a
        display: block
        font-size: 14px
        color: rgb(77, 85, 93)
        &.active
          color: rgb(240, 20, 20)
</style>

header.vue

<template>
  <p>
    <v-header :seller="seller"></v-header>
    <p class="tab border-1px">
      <p class="tab-item">
        <router-link to="/goods">商品</router-link>
      </p>
      <p class="tab-item">
        <router-link to="/ratings">评论</router-link>
      </p>
      <p class="tab-item">
        <router-link to="/seller">商家</router-link>
      </p>
    </p>
    <keep-alive>
      <router-view :seller="seller"></router-view>
    </keep-alive>
  </p>
</template>

<script type="text/ecmascript-6">
  import {urlParse} from 'common/js/util';
  import header from 'components/header/header.vue';

  const ERR_OK = 0;

  export default {
    data() {
      return {
        seller: {
          id: (() => {
            let queryParam = urlParse();
            return queryParam.id;
          })()
        }
      };
    },
    created() {
      this.$http.get('/api/seller?id=' + this.seller.id).then((response) => {
        response = response.body;
        if (response.errno === ERR_OK) {
          this.seller = Object.assign({}, this.seller, response.data);
        }
      });
    },
    components: {
      'v-header': header
    }
  };

</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "./common/stylus/mixin.styl"

  .tab
    display: flex
    width: 100%
    height: 40px
    line-height: 40px
    // border-bottom: 1px solid rgba(7, 17, 27, 0.1)
    border-1px(rgba(7, 17, 27, 0.1))
    .tab-item
      flex: 1
      text-align: center
      & > a
        display: block
        font-size: 14px
        color: rgb(77, 85, 93)
        &.active
          color: rgb(240, 20, 20)
</style>
淡淡烟草味
淡淡烟草味

répondre à tous(7)
仅有的幸福

Ce mode clé-valeur ne peut pas être surveillé par vue. . .
Vous pouvez utiliser $set pour modifier la valeur à l'intérieur
this.$set(object, key value, new value)

仅有的幸福

Je ne sais pas si c'est un problème de cache

女神的闺蜜爱上我

Vérifiez s'il y a des erreurs dans la compilation. S'il est compilé correctement, utilisez ctrl+F5 pour forcer l'actualisation de la page.

滿天的星座

Mettez la demande de données en monté

習慣沉默

Veuillez essayer d'ajouter un horodatage

过去多啦不再A梦

Il est recommandé que lorsque vous posez une question, décrivez le problème clairement et spécifiquement. data.json a été modifié (où se trouvent les données modifiées), mais le dom n'est pas mis à jour (soit il n'est pas mis à jour, soit il n'est pas mis à jour en un). place), trois morceaux de code majeurs. Il n'est pas pratique pour les personnes qui souhaitent vous aider à résoudre le problème de localiser rapidement le problème. Est-ce un problème de liaison ? Utilisez v-bind:xxx au lieu de:xxx

.
刘奇

J'ai rencontré ce problème, la solution est d'utiliser la mise à jour asynchrone this.$nextTick(callback())

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal