javascript - tutorial - El contenido no se muestra correctamente en la función de devolución de llamada en Vue.js

vue.js que es

Question

Tengo dos problemas aquí. La primera es que no puedo obtener la estrella renderizada correctamente. Puedo hacerlo si cambio el valor en la función de data() , pero si quiero hacerlo en una función de devolución de llamada, no funciona (ver comentarios a continuación). ¿Qué está mal aquí? ¿Tiene algo que ver con el ciclo de vida de Vue?

El segundo es que quiero enviar la tarifa de estrellas y el contenido del área de texto y cuando actualizo la página, el contenido debe mostrarse en la página y reemplazar el <textarea></textarea> ¿qué puedo hacer?

Quiero hacer un JSFiddle aquí, pero no sé cómo hacerlo en el componente de un solo archivo de Vue, realmente agradezco su ayuda.

<div class="order-comment">
  <ul class="list-wrap">
    <li>
      <span class="comment-label">rateA</span>
      <star-rating :data="dimensionA"></star-rating> 
    </li>
  </ul>
  <div>
    <h4 class="title">comment</h4>
    <textarea class="content" v-model="content">      
    </textarea>
  </div>
  <mt-button type="primary" class="mt-button">submit</mt-button>
 </div>
</template>

<script>
import starRating from ''components/starRating''
import dataService from ''services/dataService''
export default {
  data () {
    return {
      dimensionA: ''''  //if I changed the value here the star rendered just fine.
    }
  },
  components: {
    starRating
  },
  methods: {
    getComment (id) {
      return dataService.getOrderCommentList(id).then(data => {
        this.dimensionA = 1
      })
    }
  },
  created () {
    this.getComment(1)  // not working
  }
}
</script>

Answer 1

Lo que parece es que el alcance de this no es correcto en su método getComment , necesita cambios como los siguientes:

methods: {
  getComment (id) {
    var self = this;
    dataService.getOrderCommentList(id).then(data => {
     self.dimensionA = 1
    })
  }
},

Como quiera reemplazar el <textarea> y mostrar el contenido si está presente, puede usar v-si para esto, si el contenido está disponible- mostrar contenido else show <textarea>

  <div>
    <h4 class="title">comment</h4>
    <span v-if="content> {{content}} </span>
    <textarea v-else class="content" v-model="content">      
    </textarea>
  </div>

Ver trabajo violín aquí .

Un problema más que he observado en su código es que está utilizando apoyos dinámicos, pero inicialmente ha asignado el apuntalamiento al value variable de datos en el componente de star-rating , pero no está verificando cambios futuros en el accesorio. Una forma de resolver esto, suponiendo que tienes algún otro uso de la variable de value , es poner el reloj siguiente:

watch:{
   data: function(newVal){
      this.value = newVal
   }
}

ver el violín actualizado