Vue JS复选框,将json对象作为值传递给模型

时间:2019-02-22 12:28:36

标签: javascript vue.js vuejs2 vue-component

是否可以将Json Object作为值传递给复选框 我有多个如下所示的复选框... selectedUsers是一个包含选定值的数组... id最终以json数组结尾,例如[{“ userid”:“ 12345”},{“ userid”:“ 54321”}]

<input
  :id="`checkbox` + index" v-model="selectedUsers"
  :value="{"userId": user.userId}"
  @change="selectUsers"

以上内容给了我一个解析错误 解析错误:属性名称意外字符。

我能够传递这样的对象

  :value="{userId: user.userId}"

在这里实现我想要的东西有聪明的方法吗?

2 个答案:

答案 0 :(得分:1)

好吧,如果需要,您可以创建一个对象并将其传递给以下值。

  <input
  :id="`checkbox` + index" v-model="selectedUsers"
  :value="details"
  @change="selectUsers">

  data: {
    details:{
    user:'userid'
    }
  }

答案 1 :(得分:0)

调用方法并将用户ID传递给该方法:

  Uri imageUri = intent.getParcelableExtra("URI");
        if (imageUri != null) {
            imageView.setImageURI(imageUri);
            try {
                bitmap = MediaStore.Images.Media.getBitmap(this.getContentResolver(), imageUri);

                new Thread() {
                    @Override
                    public void run() {
                        try {
                            //Write file
                            FileOutputStream stream = CropResultActivity.this.openFileOutput(filename, Context.MODE_PRIVATE);
                            bitmap.compress(Bitmap.CompressFormat.PNG, 100, stream);
                            //Cleanup
                            stream.close();
                        } catch (Exception e) {
                            e.printStackTrace();
                        }
                    }
                }.run();

            } catch (IOException e) {
                e.printStackTrace();
            }
        } else {
            Toast.makeText(this, "No image is set to show", Toast.LENGTH_LONG).show();
        }

  btn_next_process.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            if (bitmap == null) {
                Toast.makeText(CropResultActivity.this, "Empty", Toast.LENGTH_SHORT).show();
            }
            else {
                //Pop intent
                Intent in1 = new Intent(CropResultActivity.this, InputProcessingActivity.class);
                in1.putExtra("image_data", filename);
                startActivity(in1);
            }
        }
    });

然后在组件的方法声明中:

  private void getIncomingIntent(){
    if(getIntent().hasExtra("image_data")){
        try {
            String filename = getIntent().getStringExtra("image_data");
            FileInputStream is = this.openFileInput(filename);
            imageToProcess = BitmapFactory.decodeStream(is);
            process_detect_edges(imageToProcess);
            is.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}