Передача переменной из контроллера в vue? - PullRequest
Новая
       17

Передача переменной из контроллера в vue?

0 голосов
/ 06 апреля 2020

Я хочу восстановить из своей функции контроллера среднее значение задач каждого проекта, которые я пробовал, но это не сработало, это показывает 0. Любая помощь, ребята? (проблема в проекте. vue) это функция прогресса, которая возвращает среднее значение задач каждого проекта: 

 public function progress($id){

$tasks=Task::where(['projet_id'=>$id])->get();
$x=0;
$i=0;
 foreach ($tasks as $task) {

    $x = $x + $task->progress;
    $i++ ;
  }
  $progress=$x/$i;
 return $progress;
  }

и это где я хочу показать прогресс в проекте. vue: 

 <tr v-for="projet in projets.data" :key="projet.id" >
<td @change="avancemant(projet.id)">
{{ parseInt(100 * progress ) }}%
<img :src="`/img/icon/verif.png`" style="width:15px; 
 v-if="`${parseInt(100*progress)}`==100" >
</img>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="0"   
id="progress" v-model="form.progress" 
aria-valuemin="`${parseInt(100*task.progress)}`":style=" 
{'width':`${parseInt(100*progress)}%`}" aria-valuemax="100">
 </div>
 </div>             
 </td>

и это мой проект. vue script: 

export default {
     data(){
         return{
      progress:'',
      projets:{},
      projet:{
          id:''
      },
      }}
    created(){
           }
    methods:{
     avancemant($id){
       axios.get('/api/progress/'+$id).then(({data})=>(this.progress =data.data));;
     },
    }

1 Ответ

0 голосов
/ 06 апреля 2020

Есть несколько вопросов. Тег <td> не будет вызывать событие изменения.

Даже если вы настроите его на прослушивание обновлений, вы столкнетесь с бесконечной проблемой l oop.

Вам также понадобится способ хранить различные значения прогресса.

Вы можете обновить объект projets следующим образом: 

avancemant(id){
  axios.get('/api/progress/'+id).then(
     ({data}) => (this.projets.data[id].progress = data.data)
  )
}

И вызвать его из подключенного хука следующим образом: 

mounted () {
    Object.values(this.projets.data).forEach(function(x){
       this.avancemant(x.id)
    })
}

Конечно, он будет срабатывать только один раз. Несколько раз запустить его в зависимости от уровня прогресса - это другой вопрос.

...