Question

我在使用VueJS时遇到了很多困难。在我的组件之一中，我以对象数组的形式从后端检索了数据。检索这些数据后，我将使用forEach遍历数据，并在每个对象中添加一个字段。

<template>
    ...
    <div v-if="!waitingForComments && comments.length > 0">
      <div class="comment" v-for="comment in comments" :key="comment.id">
        <p>{{ comment.content }}</p>
        <span>Par <router-link :to="{ name: 'user', params: { id: comment.author_id } }">-- {{ comment.author }}</router-link></span>
      </div>
    </div>
    ...
</template>

<script>
  import { getPost } from "../services/post";
  import { getComments } from "../services/comment";
  import { getUser } from "../services/user";

  export default {
    name: 'Post',
    data() {
      return {
        post: null,
        comments: [],
        postId: null,
        waitingForComments: true
      }
    },
    async created() {
      this.postId = this.$route.params.id;
      this.post = await getPost(this.$route.params.id);

      let allComments = await getComments(this.postId);
      allComments.forEach(async comment => {
        let author = await getUser(comment.author_id);
        comment.author = author.firstname + " " + author.lastname;
      });
      this.comments = allComments;
      this.waitingForComments = false;
    }
  }
</script>

在<router-link>中，“-”显示没有问题，但是comment.author没有打印任何内容！ Vue的Chrome调试器显示了author字段确实包含值！

我真的不明白这是哪里来的。我尝试在await前面使用forEach()，也尝试在comments上使用观察者，并在该观察者中检索作者。但是什么都行不通。

任何帮助将不胜感激！

Answer 1

foreach函数不能像.map函数那样工作。地图返回一个数组，但foreach不会。

复制/粘贴您创建的函数：

async created() {
  this.postId = this.$route.params.id;
  this.post = await getPost(this.$route.params.id);

  let allComments = await getComments(this.postId);

  this.comments = allComments.map(async comment => {
    let author = await getUser(comment.author_id);
    comment.author = author.firstname + " " + author.lastname;

    return comment;
  });

  this.waitingForComments = false;
}

但是，此迭代有一个问题，要查看结果，必须让查询结束。因此，您需要在created（）函数中添加以下代码。

this.waitingForComments = true;
const results = await Promise.all(this.comments);
this.waitingForComments = false;

也许它不起作用，因为我没有检查它。但是请尝试一下，希望它对您有用。

Answer 2

我不会将forEach与async/await一起使用：请参见here 我想这就是您的pb：forEach不等待;）

好的for... of可以解决问题。

async created() {
      this.postId = this.$route.params.id;
      this.post = await getPost(this.$route.params.id);

      let allComments = await getComments(this.postId);
      for(let comment of allComments){
        let author = await getUser(comment.author_id);
        comment.author = `${author.firstname} ${author.lastname}`;
      }
      this.comments = allComments;
      this.waitingForComments = false;
    }

Answer 3

使用

public class NextActivity extends AppCompatActivity {
ImageView img;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_next);
    img=findViewById(R.id.down);
    //getActionBar().setDisplayHomeAsUpEnabled(true);
   // getActionBar().setHomeButtonEnabled(true);
    //Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    //setSupportActionBar(toolbar);
   // this.getSupportActionBar().setDisplayHomeAsUpEnabled(false);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);



    NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
    assert navigationView != null;

  //update code
    img.setImageBitmap(getImage());
       //navigationView.setNavigationItemSelectedListener((NavigationView.OnNavigationItemSelectedListener) this);
        if (getSupportActionBar() != null){
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
            getSupportActionBar().setDisplayShowHomeEnabled(true);
        }
       // getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        //getSupportActionBar().setHomeButtonEnabled(true);
    }

@Override
public boolean onOptionsItemSelected(@NonNull MenuItem item) {
    if (item.getItemId() == android.R.id.home) {
        finish(); // close this activity and return to preview activity (if there is any)
    }
    return super.onOptionsItemSelected(item);
}





  public Image getImage(){
    File imgFile = new File("/image_location"); 

//code to get image from path
if(imgFile.exists())


  {
 Bitmap myBitmap = BitmapFactory.decodeFile(imgFile.getAbsolutePath()); 
    }

    return myBitmap;

//returns image to specified imageview
        }

@Override
public void onBackPressed() {

        super.onBackPressed();
    }}



  }

代替

this.$set(this, "comments", allComments);

修改数据后，VueJS不重新呈现

3 个答案: